select variance

android/app/src/main/AndroidManifest.xml

@@ -1,44 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="io.ionic.starter">
-
-    <application
-        android:allowBackup="true"
-        android:icon="@mipmap/ic_launcher"
-        android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
-        android:supportsRtl="true"
-        android:theme="@style/AppTheme"
-        android:usesCleartextTraffic="true"
-      >
-
-        <activity
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
-            android:name="io.ionic.starter.MainActivity"
-            android:label="@string/title_activity_main"
-            android:theme="@style/AppTheme.NoActionBarLaunch"
-            android:launchMode="singleTask"
-            android:exported="true">
-
+<?xml version='1.0' encoding='utf-8'?>
+<manifest package="io.ionic.starter" xmlns:android="http://schemas.android.com/apk/res/android">
+    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
+        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/title_activity_main" android:launchMode="singleTask" android:name="io.ionic.starter.MainActivity" android:theme="@style/AppTheme.NoActionBarLaunch">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
-
         </activity>
-
-        <provider
-            android:name="androidx.core.content.FileProvider"
-            android:authorities="${applicationId}.fileprovider"
-            android:exported="false"
-            android:grantUriPermissions="true">
-            <meta-data
-                android:name="android.support.FILE_PROVIDER_PATHS"
-                android:resource="@xml/file_paths"></meta-data>
+        <provider android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
+            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
         </provider>
     </application>
-
-    <!-- Permissions -->
-
     <uses-permission android:name="android.permission.INTERNET" />
 </manifest>

src/api_config.ts

@@ -1,3 +1,4 @@
-export const API_URL = "http://192.168.100.180:8000/api/"
+//export const API_URL = "http://192.168.100.180:8000/api/"
+export const API_URL = "http://192.168.116.166:8000/api/"
 //export const API_URL = "https://kacee.simplico.net/api/"
 

src/components/ProductDetail.vue

@@ -1,13 +1,12 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-button color="medium" @click="cancel">Cancel</ion-button>
-      </ion-buttons>
-      <ion-title>Modal</ion-title>
-      <ion-buttons slot="end">
-        <ion-button @click="confirm">Confirm</ion-button>
-      </ion-buttons>
+			<ion-buttons slot="start">
+      	<ion-button @click="cancel">
+					<ion-icon :icon="arrowBack"></ion-icon>
+				</ion-button>
+    	</ion-buttons>
+      <ion-title>รายละเอียด</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
@@ -33,7 +32,69 @@
             </ion-col>
         </ion-row>
       </ion-grid>
-      <h1>{{ product.name }} {{ product.id }}</h1>
+
+      <h1>{{ product.name }}</h1>
+			<ion-item>
+				<ion-label color="danger">
+					<h1>{{product.price}}  <s>{{product.list_price}}</s></h1>
+					<p><b>SKU</b> {{product.sku}} <b>Qty</b> {{product.qty}}  </p>
+				</ion-label>
+			</ion-item>
+
+			<ion-grid class="ion-padding">
+				<ion-row id="open-vars" expand="block" @click="">
+					<ion-col>
+						<ion-label><b>ตัวเลือกสินค้า</b></ion-label>
+					</ion-col>
+					<ion-col>
+						<ion-label>{{varsTxt}}</ion-label>
+					</ion-col>
+				</ion-row>
+						<div v-for="pv in product.product_variance_options" :key='pv.id'>
+							<ion-row>
+								<div v-for="(var_value, idx) in pv.var_values">
+									<ion-col>
+										<ion-img v-if="var_value.image" :src="var_value.image" style="height:40px" class="ion-padding-end" @click="vSelect(var_value, product.prod_vars)"></ion-img>
+									</ion-col>
+								</div>
+							</ion-row>
+						</div>
+			</ion-grid>
+
+			<ion-modal ref="modal" trigger="open-vars" :initial-breakpoint="0.80" :breakpoints="[0, 0.80, 0.5, 0.75]">
+				<ion-content class="ion-padding">
+							
+					<ion-grid class="ion-padding">
+						<ion-row>
+							<ion-col size="auto">
+								<div style="width: 100px">
+									<img v-if="product.cover" :src="product.cover" />
+									<img v-else  src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+								</div>
+							</ion-col>
+
+							<ion-col>
+										<h1>{{product.price}}  <s>{{product.list_price}}</s></h1>
+										<p><b>Qty</b> {{product.qty}}  </p>
+							</ion-col>
+
+						</ion-row>
+
+						<div v-for="pv in product.product_variance_options" :key='pv.id'>
+							<ion-label>{{pv.name}}: {{pv.id}}</ion-label>
+							<ion-row>
+								<div v-for="(var_value, idx) in pv.var_values">
+									<ion-col>
+										<ion-img v-if="var_value.image" :src="var_value.image" style="height:40px" class="ion-padding-end" @click="vSelect(var_value, product.prod_vars)"></ion-img>
+										<ion-button v-else :color="isSelect(var_value)" @click="vSelect(var_value, product.prod_vars)">{{var_value.value}}</ion-button>
+									</ion-col>
+								</div>
+							</ion-row>
+						</div>
+					</ion-grid>
+				</ion-content>
+			</ion-modal>
+
       <!--
         {{ readmore }} -->
       <ion-text v-html="short_desc" v-if="!readmore" />
@@ -63,9 +124,15 @@ import {
   IonText,
   modalController,
   onIonViewWillEnter, 
-  IonThumbnail
+  IonThumbnail,
+	IonIcon,
+	IonList,
+	IonListHeader,
+  IonModal,
+  IonAvatar,
 } from '@ionic/vue';
 
+import { arrowBack } from 'ionicons/icons';
 import { VueShowdown } from 'vue-showdown';
 import { ReadMore } from 'vue-read-more';
 import { ref, onMounted } from 'vue'
@@ -88,6 +155,10 @@ let description = ref(null)
 let short_desc = ref(null)
 let readmore = ref(false)
 
+let myItem = ref([]);
+let myOrder	= ref(null);
+let varsTxt = ref("");
+
 //console.log(pid)
 
 let name = ref("xxx")
@@ -97,6 +168,49 @@ function cancel(){
 function confirm(){
   return modalController.dismiss(name.value, 'confirm');
 }
+
+function vSelect(var_value, prod_vars){
+
+	let rs = myItem.value.findIndex(({product_variance}) => product_variance === var_value.product_variance);
+	if (rs >= 0){
+	  myItem.value[rs] = { 'product_variance': var_value.product_variance, 'var_value' : var_value.value};
+	} else {
+		myItem.value.push({ 'product_variance': var_value.product_variance, 'var_value' : var_value.value});
+	}
+	console.log(rs);
+	let vars = myItem.value.map((e) => e.var_value);
+	console.log(myItem);
+	console.log(vars);
+	let stock = prod_vars.find(({values}) => JSON.stringify(values.sort()) === JSON.stringify(vars.sort()));
+	console.log(stock);
+	if(var_value.image) {
+		product.value['cover'] = var_value.image;
+	}
+	if(stock){
+		console.log('stock found');
+		myOrder.value = stock;
+		product.value['qty'] = stock.qty;
+		product.value['price'] = stock.price;
+		product.value['list_price'] = stock.list_price;
+		product.value['sku'] = stock.sku;
+		product.value['currency'] = stock.currency;
+	}
+
+  return "ok";
+}
+
+function isSelect(v){
+	console.log('SSSSSS',myItem.value);
+	console.log(v);
+	let rs = myItem.value.findIndex(({var_value}) => var_value === v.value);
+	if(rs >= 0) {
+		console.log('my found')
+		return 'primary';
+	} else {
+		return 'light'
+	}
+}
+
 onMounted(async () => {
 //onIonViewWillEnter(() => {
   console.log("on mounted")
@@ -105,14 +219,20 @@ onMounted(async () => {
   product.value = res.data
   pid.value  = props.pid
   console.log("description")
-  console.log(description)
+  //console.log(description)
   //readmore(description)
-  console.log(res.data)
+  //console.log(res.data)
   description.value = marked(res.data.description)
   short_desc.value = truncateMarkdown(res.data.description, { limit: 300, ellipsis: true })
   let sd  = truncateMarkdown(res.data.description, { limit: 300, ellipsis: true })
   short_desc.value = marked(sd)
-  console.log(description.value)
+
+	for(let pv of product.value.product_variance_options){
+			varsTxt.value = varsTxt.value + ' ' + pv.var_values.length + ' ' + pv.name;
+			console.log(pv.name.toString());
+	}
+	console.log(varsTxt)
+  //console.log(description.value)
 })
 
 </script>