Shopping Website

नमस्‍कार दोस्‍तो,

इस ब्‍लॉग में हम आपको बहुत ही सरल भाषा में बतायेगें की किस प्रकार गुगल शीट के डेटा एवं वेब एप स्‍क्रीप्‍ट की मदद से ऑनलाईन शॉपिंग वेबसाईट केसे बना सकते है ा

उक्‍त साफटवेयर की मदद से आप अपने दैनिक कार्य को सरल तरिके से कर सकते है ा

How to Make Shopping Website

In this blog we will tell you How to Make Shopping Website so read the complete blog carefully and learn How to Make Shopping Website according to given guidelines.

सबसे पहले Step 1 में दि गई गुगल शीट पर किल्‍क करके अपने Drive में काॅपी करें ा

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 8 file Name Given Below

gas.gs

app.html

css.html

footer.html

header.html

index.html

snackbar.html

vuejs.html

Step 4 :- Click to Copy Below Code and Paste to gas.gs File

class App { constructor() { this.ss = SpreadsheetApp.getActive() this.settings = this.getSettings() this.props = PropertiesService.getScriptProperties() this.keyOrderNumber = "key-order-number" } getAppData_() { const appData = { ...this.settings, name: this.settings.appName, sheets: { responses: this.settings.snResponses, commonItems: this.settings.snCommonItems, repeatItems: this.settings.snRepeatItems, items: this.settings.snItems, }, commonFormItems: this.getFormItems_(this.settings.snCommonItems), repeatFormItems: this.getFormItems_(this.settings.snRepeatItems), } return appData } getSettings() { const settings = {} const ws = this.ss.getSheetByName(SN_APP_DATA) if (!ws) return ws.getDataRange().getValues().slice(1).forEach(([key, value]) => { settings[key.toString().trim()] = value }) return settings } getItems_(sheetname) { const ws = this.ss.getSheetByName(sheetname) if (!ws) return [] const [headers, ...values] = ws.getDataRange().getValues() return values.map(v => { const item = {} headers.forEach((header, i) => { const key = header.toString().trim() item[key] = v[i] }) return item }) } getFormItems_(sheetname) { const ws = this.ss.getSheetByName(sheetname) if (!ws) return let [headers, ...values] = ws.getDataRange().getDisplayValues() headers = headers.map(v => v.trim()) const indexType = headers.indexOf("type") return values.map(v => { const item = { value: null, type: v[indexType].trim() } headers.forEach((header, i) => { const key = header.trim() const value = v[i].trim() if (key === "items") { if (item.type === "autocomplete") { if (value.indexOf(",") === -1) { item[key] = this.getItems_(value) } else { item[key] = value.split(",").map(v => v.trim()).filter(v => v !== "") } } else if (item.type === "single" || item.type === "multiple") { item[key] = value.split(",").map(v => v.trim()).filter(v => v !== "") } else { item[key] = value } } else { item[key] = value } }) return item }) } addItems_(items) { const orderNumber = this.createOrderNumber_() const timestamp = new Date() items.forEach(item => { item[this.settings.keyUuid] = Utilities.getUuid() item[this.settings.keyOrderNumber] = orderNumber item[this.settings.keyTimestamp] = timestamp this.addItem_(item) }) } createOrderNumber_() { const prop = this.props.getProperty(this.keyOrderNumber) const index = prop == null ? 1 : Number(prop) this.props.setProperty(this.keyOrderNumber, index + 1) const digit = (10 ** this.settings.lengthOrderNumber + index).toString().slice(-this.settings.lengthOrderNumber) return `${this.settings.prefixOrderNumber}${digit}` } addItem_(item) { const ws = this.ss.getSheetByName(this.settings.snResponses) const [keys] = ws.getDataRange().getDisplayValues() Object.keys(item).forEach(key => { if (keys.indexOf(key) === -1) keys.push(key) }) ws.getRange(1,1,1,keys.length).setValues([keys]) const rowContents = keys.map(key => item[key] || null) ws.appendRow(rowContents) } } const SN_APP_DATA = "App Data" const app = new App() const settings = app.getSettings() const include = (filename) => HtmlService.createTemplateFromFile(filename).evaluate().getContent() const doGet = e => HtmlService.createTemplateFromFile("index") .evaluate() .setTitle(settings.appName) .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) .addMetaTag("viewport", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui") const getAppData = () => JSON.stringify(app.getAppData_()) const submit = items => app.addItems_(JSON.parse(items))

Step 5 :- Click to Copy Below Code and Paste to app.html File

<v-app> <?!= include("header.html") ?> <v-main> <v-container v-if="loadingError" fluid> <v-card outlined flat> <v-card-title>Loading Error</v-card-title> <v-card-text> <p color="error">{{loadingError}}</p> </v-card-text> </v-card> </v-container> <v-container v-else fluid> <v-card flat> <v-card-text> <v-form :disabled="submitting" ref="form"> <v-row> <v-col cols="12" md="4"> <v-card outlined :loading="submitting"> <template slot="progress"> <v-progress-linear color="primary" height="3" indeterminate></v-progress-linear> </template> <v-card-title>{{sheets.commonItems}}</v-card-title> <v-card-text> <v-row> <v-col> <template v-for="item in commonFormItems"> <v-select outlined dense :key="item.key" v-if="item.type === 'single' || item.type === 'multiple'" :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model="item.value" :items="item.items" :multipe="item.type === 'multiple'"> </v-select> <v-autocomplete outlined dense :key="item.key" v-else-if="item.type === 'autocomplete'" :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model="item.value" :items="item.items"> </v-autocomplete> <v-text-field outlined dense :key="item.key" v-else-if="item.type === 'number'" :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model.number="item.value"> </v-text-field> <v-text-field outlined dense :key="item.key" v-else :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model.trim="item.value"> </v-text-field> </template> </v-col> </v-row> </v-card-text> </v-card> </v-col> <v-col cols="12" md="8"> <v-card outlined :loading="submitting"> <template slot="progress"> <v-progress-linear color="primary" height="3" indeterminate></v-progress-linear> </template> <v-card-title>{{sheets.repeatItems}}</v-card-title> <v-card-text> <v-row> <v-col class="mt-3"> <v-row v-for="(selectedItem, i) in selectedItems" :key="i"> <v-col v-for="(item, index) in selectedItem" :key="item.key" class="my-0 py-0"> <v-select outlined dense v-if="item.type === 'single' || item.type === 'multiple'" :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model="item.value" :items="item.items" :multipe="item.type === 'multiple'"> </v-select> <v-autocomplete outlined dense v-else-if="item.type === 'autocomplete'" :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model="item.value" :items="item.items" item-value="itemNo" style="width: 35vw;"> <template v-slot:selection="data"> {{data.item.itemNo}} - {{data.item.text}} </template> <template v-slot:item="data"> <template v-if="typeof data.item !== 'object'"> <v-list-item-content v-text="data.item"> </v-list-item-content> </template> <template v-else> <v-list-item-content> <v-list-item-title v-html="data.item.text"> </v-list-item-title> <v-list-item-subtitle v-html="`${data.item.itemNo} - ₹${data.item.price}`"> </v-list-item-subtitle> </v-list-item-content> </template> </template> </v-autocomplete> <v-text-field outlined dense v-else-if="item.type === 'number'" :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model.number="item.value"> </v-text-field> <v-text-field outlined dense v-else :label="item.label" :type="item.type" :prepend-icon="item.icon" v-model.trim="item.value"></v-text-field> </v-col> <div class="mx-3"> <v-btn color="primary" icon @click="addSelectedItem(i)" :disabled="submitting"> <v-icon>mdi-plus</v-icon> </v-btn> <v-btn color="error" icon @click="removeSelectedItem(i)" :disabled="i === 0 || submitting"> <v-icon>mdi-minus</v-icon> </v-btn> </div> </v-row> </v-col> </v-row> </v-card-text> <v-card-actions class="pb-4 px-4"> <v-spacer></v-spacer> <v-chip label outlined color="secondary" class="ml-4">Selected: {{selectedItems.length}}</v-chip> <v-chip label outlined color="secondary" class="ml-4">Total Qty: {{totalQty}} </v-chip> <v-chip label outlined color="secondary" class="ml-4">Total Price: {{totalPrice}}</v-chip> </v-card-actions> </v-col> </v-row> </v-form> </v-card-text> </v-card> </v-container> </v-main> <?!= include("footer.html") ?> <?!= include("snackbar.html") ?> </template> </v-app>

Step 6 :- Click to Copy Below Code and Paste to css.html File

Step 7 :- Click to Copy Below Code and Paste to footer.html File

<template> <v-footer dark padless> <v-card flat tile class="secondary lighten-3 text-center" width="100%"> <v-card-text> <v-btn v-for="link in links" :key="link.icon" class="mx-4 white--text" link :href="link.url" target="_blank" text> <v-icon size="24px" left> {{ link.icon }} </v-icon>{{link.label}} </v-btn> </v-card-text> <v-card-text class="white--text pt-0"> {{footerText}} </v-card-text> <v-divider></v-divider> <v-card-text class="white--text"> {{ new Date().getFullYear() }} — <strong>{{footerCompany}}</strong> </v-card-text> </v-card> </v-footer> </template>

Step 8 :- Click to Copy Below Code and Paste to header.html File

<template> <v-app-bar app flat absolute dark color="primary" loading> <v-toolbar-title>{{name}}</v-toolbar-title> <v-spacer></v-spacer> <v-btn text :disabled="submitting" @click="submit"> <v-icon left>mdi-send</v-icon>Submit </v-btn> </v-app-bar> </template>

Step 9 :- Click to Copy Below Code and Paste to index.html File

<!DOCTYPE html> <html> <head> <base target="_top"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <?!= include("css.html") ?> </head> <body> <div id="app" v-cloak> <?!= include("app.html") ?> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <?!= include("vuejs.html") ?> </body> </html>

Step 9 :- Click to Copy Below Code and Paste to snackbar.html File

<template> <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="snackbar.timeout"> {{ snackbar.text }} <template v-slot:action="{ attrs }"> <v-btn text v-bind="attrs" @click="snackbar.show = false"> Close </v-btn> </template> </v-snackbar> </template>

Step 10 :- Click to Copy Below Code and Paste to vuejs.html File