OpenGL Accelerated HTML Overlay/Getting Started/Getting the Code: Difference between revisions
No edit summary |
mNo edit summary |
||
(3 intermediate revisions by one other user not shown) | |||
Line 4: | Line 4: | ||
== Getting the Code == | == Getting the Code == | ||
HTML Overlay is RidgeRun's | HTML Overlay is RidgeRun's Professional Product. You can purchase it with full source code from the '''[https://shop.ridgerun.com/products/htmloverlay RidgeRun Online Store]''' or using the Shopping Cart below : | ||
<center> | |||
<html> | |||
<div id='product-component-1689105566002'></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: 'ridgerun1.myshopify.com', | |||
storefrontAccessToken: 'b0ca98633a82de5d2f63cd51f5af30ac', | |||
}); | |||
ShopifyBuy.UI.onReady(client).then(function (ui) { | |||
ui.createComponent('product', { | |||
id: '7858827919547', | |||
node: document.getElementById('product-component-1689105566002'), | |||
moneyFormat: '%24%7B%7Bamount%7D%7D', | |||
options: { | |||
"product": { | |||
"styles": { | |||
"product": { | |||
"@media (min-width: 601px)": { | |||
"max-width": "calc(25% - 20px)", | |||
"margin-left": "20px", | |||
"margin-bottom": "50px" | |||
} | |||
}, | |||
"button": { | |||
"font-family": "Open Sans, sans-serif", | |||
"font-weight": "bold", | |||
"font-size": "18px", | |||
"padding-top": "17px", | |||
"padding-bottom": "17px", | |||
":hover": { | |||
"background-color": "#0187a7" | |||
}, | |||
"background-color": "#0196ba", | |||
":focus": { | |||
"background-color": "#0187a7" | |||
}, | |||
"border-radius": "5px", | |||
"padding-left": "50px", | |||
"padding-right": "50px" | |||
}, | |||
"quantityInput": { | |||
"font-size": "18px", | |||
"padding-top": "17px", | |||
"padding-bottom": "17px" | |||
} | |||
}, | |||
"text": { | |||
"button": "Add to cart" | |||
}, | |||
"googleFonts": [ | |||
"Open Sans" | |||
] | |||
}, | |||
"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" | |||
} | |||
}, | |||
"button": { | |||
"font-family": "Open Sans, sans-serif", | |||
"font-weight": "bold", | |||
"font-size": "18px", | |||
"padding-top": "17px", | |||
"padding-bottom": "17px", | |||
":hover": { | |||
"background-color": "#0187a7" | |||
}, | |||
"background-color": "#0196ba", | |||
":focus": { | |||
"background-color": "#0187a7" | |||
}, | |||
"border-radius": "5px", | |||
"padding-left": "50px", | |||
"padding-right": "50px" | |||
}, | |||
"quantityInput": { | |||
"font-size": "18px", | |||
"padding-top": "17px", | |||
"padding-bottom": "17px" | |||
} | |||
}, | |||
"googleFonts": [ | |||
"Open Sans" | |||
] | |||
}, | |||
"option": {}, | |||
"cart": { | |||
"styles": { | |||
"button": { | |||
"font-family": "Open Sans, sans-serif", | |||
"font-weight": "bold", | |||
"font-size": "18px", | |||
"padding-top": "17px", | |||
"padding-bottom": "17px", | |||
":hover": { | |||
"background-color": "#0187a7" | |||
}, | |||
"background-color": "#0196ba", | |||
":focus": { | |||
"background-color": "#0187a7" | |||
}, | |||
"border-radius": "5px" | |||
}, | |||
"title": { | |||
"color": "#4c4c4c" | |||
}, | |||
"header": { | |||
"color": "#4c4c4c" | |||
}, | |||
"lineItems": { | |||
"color": "#4c4c4c" | |||
}, | |||
"subtotalText": { | |||
"color": "#4c4c4c" | |||
}, | |||
"subtotal": { | |||
"color": "#4c4c4c" | |||
}, | |||
"notice": { | |||
"color": "#4c4c4c" | |||
}, | |||
"currency": { | |||
"color": "#4c4c4c" | |||
}, | |||
"close": { | |||
"color": "#4c4c4c", | |||
":hover": { | |||
"color": "#4c4c4c" | |||
} | |||
}, | |||
"empty": { | |||
"color": "#4c4c4c" | |||
}, | |||
"noteDescription": { | |||
"color": "#4c4c4c" | |||
}, | |||
"discountText": { | |||
"color": "#4c4c4c" | |||
}, | |||
"discountIcon": { | |||
"fill": "#4c4c4c" | |||
}, | |||
"discountAmount": { | |||
"color": "#4c4c4c" | |||
} | |||
}, | |||
"googleFonts": [ | |||
"Open Sans" | |||
] | |||
}, | |||
"toggle": { | |||
"styles": { | |||
"toggle": { | |||
"font-family": "Open Sans, sans-serif", | |||
"font-weight": "bold", | |||
"background-color": "#0196ba", | |||
":hover": { | |||
"background-color": "#0187a7" | |||
}, | |||
":focus": { | |||
"background-color": "#0187a7" | |||
} | |||
}, | |||
"count": { | |||
"font-size": "18px" | |||
} | |||
}, | |||
"googleFonts": [ | |||
"Open Sans" | |||
] | |||
}, | |||
"lineItem": { | |||
"styles": { | |||
"variantTitle": { | |||
"color": "#4c4c4c" | |||
}, | |||
"title": { | |||
"color": "#4c4c4c" | |||
}, | |||
"price": { | |||
"color": "#4c4c4c" | |||
}, | |||
"fullPrice": { | |||
"color": "#4c4c4c" | |||
}, | |||
"discount": { | |||
"color": "#4c4c4c" | |||
}, | |||
"discountIcon": { | |||
"fill": "#4c4c4c" | |||
}, | |||
"quantity": { | |||
"color": "#4c4c4c" | |||
}, | |||
"quantityIncrement": { | |||
"color": "#4c4c4c", | |||
"border-color": "#4c4c4c" | |||
}, | |||
"quantityDecrement": { | |||
"color": "#4c4c4c", | |||
"border-color": "#4c4c4c" | |||
}, | |||
"quantityInput": { | |||
"color": "#4c4c4c", | |||
"border-color": "#4c4c4c" | |||
} | |||
} | |||
} | |||
}, | |||
}); | |||
}); | |||
} | |||
})(); | |||
/*]]>*/ | |||
</script> | |||
</html> | |||
</center> | |||
<noinclude> | <noinclude> | ||
{{OpenGL Accelerated HTML Overlay/Foot|Getting_Started/Evaluating_HTML_Overlay|Getting_Started/Building_HTML_Overlay}} | {{OpenGL Accelerated HTML Overlay/Foot|Getting_Started/Evaluating_HTML_Overlay|Getting_Started/Building_HTML_Overlay}} | ||
</noinclude> | </noinclude> |
Latest revision as of 20:04, 16 October 2023
|
|
OpenGL Accelerated HTML Overlay |
---|
Basics |
Getting Started |
Library User Manual |
GStreamer |
Examples |
Performance |
Contact Us |
Getting the Code
HTML Overlay is RidgeRun's Professional Product. You can purchase it with full source code from the RidgeRun Online Store or using the Shopping Cart below :