OpenGL Accelerated HTML Overlay/Getting Started/Getting the Code: Difference between revisions

From RidgeRun Developer Wiki
mNo edit summary
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
{{OpenGL Accelerated HTML Overlay/Head|previous=|next=|metakeywords=Contact Us}}
{{OpenGL Accelerated HTML Overlay/Head|previous=Getting_Started/Evaluating_HTML_Overlay|next=Getting_Started/Building_HTML_Overlay|metakeywords=Contact Us}}
</noinclude>
</noinclude>


== Getting the Code ==
== Getting the Code ==
HTML Overlay is RidgeRun's professional product. You can purchase it, with full source code, from the '''ADD LINK HERE''' or using the Shopping Cart:
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||}}
{{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



Previous: Getting_Started/Evaluating_HTML_Overlay Index Next: Getting_Started/Building_HTML_Overlay
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 :


Previous: Getting_Started/Evaluating_HTML_Overlay Index Next: Getting_Started/Building_HTML_Overlay



Retrieved from "https://developer.ridgerun.com/wiki/index.php?title=OpenGL_Accelerated_HTML_Overlay/Getting_Started/Getting_the_Code&oldid=51054"