How can I load javascript within tabs? - javascript

I'm putting together a website, and want to display different products within different tabs. Each product is a buy button script c&p'd from Shopify, but the only product that loads is the one on the 'checked' tab.
Here's the live page: https://www.didsburyprint.com/mulit-product.html
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">A3</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">A2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">A1</label>
<section id="content1">
</section>
<section id="content2">
</section>
<section id="content3">
</section>
The page will only load one product, what can I do to load each script as the tab is opened?
Here's an example of the javascript I want to load in each tab.
<div id='product-component-0d047c59e1d'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'didsbury-print.myshopify.com',
storefrontAccessToken: '84d842627b8d1303f702af4934b58e9b',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [2993409196113],
node: document.getElementById('product-component-0d047c59e1d'),
moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
options: {
"product": {
"layout": "horizontal",
"variantId": "all",
"width": "100%",
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"description": true,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"button": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
},
"title": {
"font-size": "26px"
},
"price": {
"font-size": "18px"
},
"compareAt": {
"font-size": "15px"
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"button": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
},
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
}
}
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
}
}
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

Related

separate script generated by Shopify in to separate file

I want to know which part of this code should I cut and paste in to separate file .js. This code is from Shopify Buy Button and i want to use it inside a React component. I want to source the code by loading the script from the file. How the JS file shoul look like?
I try to use oryginal code generated with Shopify Buy Button creator in to react component inside of Gatsby project.
<div id='product-component-1676722408809'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'gatsby-store-mseitech.myshopify.com',
storefrontAccessToken: 'b3e5e9e12b3f72cc71b5d487dd97ff38',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '8120449532180',
node: document.getElementById('product-component-1676722408809'),
moneyFormat: '%7B%7Bamount_no_decimals%7D%7D%20kr',
options: {
"product": {
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
},
"width": "580px",
"text": {
"button": "Add to cart"
}
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>

Javascript WebDataRock pivot-table configuration from a demo starter example

I can not make this demo work, with the "hierarchy" parameter, even though I specify the parameter value, it applies the condition to all hierarchy chain.
"conditions": [{
"formula": "#value > 1",
"hierarchy": "Country",
"measure": "Discount",
"format": {
"backgroundColor": "#C5E1A5",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}]
Starter demo: https://www.webdatarocks.com/doc/conditional-formatting/
CodePen example which is also referenced from starter demo : https://codepen.io/webdatarocks/pen/oMvYGd
You could replace CodePen JS code with the code below to get a hierarchic render directly.
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
report: {
"slice": {
"rows": [
{
"uniqueName": "Country"
},
{
"uniqueName": "Category"
}
],
"columns":[
{ "uniqueName": "Color" }
],
"measures": [
{
"uniqueName": "Discount",
"aggregation": "sum"
}
] ,
},
"conditions": [{
"formula": "#value > 1",
"hierarchy": "Country",
"measure": "Discount",
"format": {
"backgroundColor": "#C5E1A5",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}],
"dataSource": {
"filename": "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
Here is related github issue, https://github.com/WebDataRocks/web-pivot-table/issues/2

You are right. The "hierarchy" parameter seems to have no effect.
An alternative solution is to apply the formatting with the customizeCell hook: https://www.webdatarocks.com/doc/customizecell/.
For example:
JS:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
customizeCell: customizeCellFunction,
report: {
slice: {
rows: [
{
uniqueName: "Country"
},
{
uniqueName: "Category"
}
],
columns: [{ uniqueName: "Color" }],
measures: [
{
uniqueName: "Discount",
aggregation: "sum"
}
]
},
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
function customizeCellFunction(cellBuilder, cellData) {
if (cellData && cellData.type === "value" && cellData.measure && cellData.measure.uniqueName === "Discount" && cellData.value > 1 ) {
if (
cellData.rows &&
cellData.rows.length > 0 &&
cellData.rows[cellData.rows.length - 1].hierarchyUniqueName === "Country"
) {
cellBuilder.addClass("green");
}
}
}
CSS:
.green {
background-color: #c5e1a5 !important;
color: #000000 !important;
font-family: Arial !important;
font-size: 12px !important;
}
Here is a CodePen example for illustration: https://codepen.io/VD_A/pen/vYXgqbY.

amcharts interactive map: making selected states a clickable link

I am creating a personal blog site. I stumbled upon an interactive visited states map in which I wanted to implement in one of my html page. I was able to successfully put it on my website with the generated html they provided. However, I wanted to tweak it a little bit but I'm not all familiar with javascript.
There are two things I want to add:
1st: Make the selected states link to a specific html page.
2nd (optional): Disable the zoom and color change when clicking on states that are not highlighted(visited).
Here is the code I have currently:
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>
<script type="text/javascript">
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor : "#FFFFFF",
backgroundAlpha : 1,
zoomControl: {
zoomControlEnabled : false
},
dataProvider : {
map : "usaHigh",
getAreasFromMap : true,
areas :
[
{
"id": "US-AZ",
"showAsSelected": true
},
{
"id": "US-CA",
"showAsSelected": true
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings : {
autoZoom : true,
color : "#B4B4B7",
colorSolid : "#DB4646",
selectedColor : "#DB4646",
outlineColor : "#666666",
rollOverColor : "#9EC2F7",
rollOverOutlineColor : "#000000"
}
});
</script>

You can add a url property to the states you want a link to. You can also set urlTarget to "_blank" if you want to make the link open in a new tab/window:
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
// ... etc
I also recommend setting autoZoom to false and selectable to true in areasSettings so that the map doesn't try to zoom before triggering the URL:
areasSettings: {
autoZoom: false,
selectable: true,
To disable the zoom and color change on the other states, simply remove getAreasFromMap: true from your dataProvider.
var map = AmCharts.makeChart("mapdiv", {
type: "map",
theme: "light",
backgroundColor: "#FFFFFF",
backgroundAlpha: 1,
zoomControl: {
zoomControlEnabled: false
},
dataProvider: {
map: "usaHigh",
areas: [{
"id": "US-AZ",
"showAsSelected": true,
"url": "http://az.gov",
"urlTarget": "_blank"
},
{
"id": "US-CA",
"showAsSelected": true,
"url": "http://ca.gov/",
"urlTarget": "_blank"
},
{
"id": "US-DC",
"showAsSelected": true
},
{
"id": "US-ID",
"showAsSelected": true
},
{
"id": "US-MA",
"showAsSelected": true
},
{
"id": "US-MT",
"showAsSelected": true
},
{
"id": "US-NJ",
"showAsSelected": true
},
{
"id": "US-NV",
"showAsSelected": true
},
{
"id": "US-NY",
"showAsSelected": true
},
{
"id": "US-OR",
"showAsSelected": true
},
{
"id": "US-PA",
"showAsSelected": true
},
{
"id": "US-WA",
"showAsSelected": true
},
{
"id": "US-WY",
"showAsSelected": true
}
]
},
areasSettings: {
autoZoom: false,
selectable: true,
color: "#B4B4B7",
colorSolid: "#DB4646",
selectedColor: "#DB4646",
outlineColor: "#666666",
rollOverColor: "#9EC2F7",
rollOverOutlineColor: "#000000"
}
});
<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/usaHigh.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1000px; height: 450px; display: block; margin-left: auto; margin-right: auto; margin-top: 100px; cursor: default;"></div>

Adding Shopify products to my website

I am creating a online store and I have added a few Shopify products to my products but they all appear underneath each other.
I cannot find a way to position it next to each other. Please advise on how I can position all my products next to each other.
I tried adding bootstrap but it still did not work.
This what I have so far:
<section id="responsive">
<div class="container">
<div class="row text-center">
<h2 id="how" class="os-animation" data-os-animation="zoomIn" data-os-animation-delay="0.3s">ASUS MOTHERBOARDS</h2>
<p style="text-align: left">Whether upgrading or building afresh, choose your 200 series board from the world's No.1 motherboard brand. ASUS x CableMod.</p>
</div>
<div class="col-sm-4">
<p>ASUS</p>
<div id='product-component-aa41b971682'></div>
<script type="text/javascript">
/*
<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'mystore.myshopify.com',
apiKey: 'e508fb07546e22c7abedd7b171cb31aa',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [123456789],
node: document.getElementById('product-component-aa41b971682'),
moneyFormat: 'R%20%7B%7Bamount%7D%7D',
options: {
"product": {
"buttonDestination": "modal",
"variantId": "all",
"width": "240px",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"options": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"text": {
"button": "VIEW PRODUCT"
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"compareAt": {
"font-size": "12px"
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
}
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
</div>
<div class="col-sm-4">
<p>NVIDIA</p>
<div id='product-component-aa41b971682'></div>
<script type="text/javascript">
/*
<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'mystore.myshopify.com',
apiKey: 'e508fb07546e22c7abedd7b171cb31aa',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [123456789],
node: document.getElementById('product-component-aa41b971682'),
moneyFormat: 'R%20%7B%7Bamount%7D%7D',
options: {
"product": {
"buttonDestination": "modal",
"variantId": "all",
"width": "240px",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"options": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"text": {
"button": "VIEW PRODUCT"
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"compareAt": {
"font-size": "12px"
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
}
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
</div>
</div>
</section>

how to change the zabuto calendar default event color using ajax jquery

How can I make different event colors in zabuto calendar. I want to specify the event with colors. But I don't know. how to do
part of my code here.
$("#my-calendar").zabuto_calendar({
ajax: {
url: urldata,
modal: true
}
});

Working example here:
var Tomorrow = moment().add('days', 1).format('YYYY-MM-DD');
var TheDayAfterTomorrow = moment().add('days', 2).format('YYYY-MM-DD');
var In3Days = moment().add('days', 3).format('YYYY-MM-DD');
var In4Days = moment().add('days', 4).format('YYYY-MM-DD');
var eventData = [{
"date": Tomorrow,
"badge": false,
"title": Tomorrow,
"classname": "rose"
}, {
"date": TheDayAfterTomorrow,
"badge": true,
"title": TheDayAfterTomorrow
}, {
"date": In3Days,
"badge": true,
"title": In3Days
}, {
"date": In4Days,
"badge": false,
"title": In4Days,
"classname": "grade-4"
}];
// initialize the calendar on ready
$("#my-calendar").zabuto_calendar({
legend: [{
type: "text",
label: "Special event",
badge: "00"
},
{
type: "block",
label: "Regular event",
classname: "rose"
},
{
type: "spacer"
},
{
type: "text",
label: "Bad"
},
{
type: "list",
list: ["grade-1", "grade-2", "grade-3", "grade-4"]
},
{
type: "text",
label: "Good"
}
],
data: eventData,
today: true,
cell_border: true,
show_previous: 2,
show_next: 2,
weekstartson: 0,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
/* Change badge color */
div.zabuto_calendar .badge-event,
div.zabuto_calendar div.legend span.badge-event {
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%) !important;
color: #fff;
text-shadow: none;
}
div.zabuto_calendar .table tr td.event div.day,
div.zabuto_calendar ul.legend li.event {
background-color: #AEEEFF !important;
}
.grade-1 {
background-color: #FA2601;
}
.grade-2 {
background-color: #FA8A00;
}
.grade-3 {
background-color: #FFEB00;
}
.grade-4 {
background-color: #27AB00;
}
.rose {
background-color: #FC92A1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/zabuto_calendar/1.6.3/zabuto_calendar.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="my-calendar"></div>

Categories

Resources