Variants

Gulpfile.js

@@ -26,6 +26,14 @@ gulp.task('scripts', function() {
             dir.bootstrapJS + 'carousel.js',
             dir.bootstrapJS + 'dropdown.js',
             dir.bootstrapJS + 'tab.js',
+            // smooth products
+            dir.bower + 'smooth-products/js/smoothproducts.min.js',
+            // components
+            dir.assets + 'scripts/components/*.js',
+            // services
+            dir.assets + 'scripts/services/*.js',
+            // pages
+            dir.assets + 'scripts/pages/*.js',
             // Main JS file
             dir.assets + 'scripts/main.js'
         ])

app/AppKernel.php

@@ -20,7 +20,10 @@ public function registerBundles()
             new ONGR\RouterBundle\ONGRRouterBundle(),
             new JMS\SerializerBundle\JMSSerializerBundle(),
             new ONGR\ApiBundle\ONGRApiBundle(),
+            new FOS\JsRoutingBundle\FOSJsRoutingBundle(),
             new AppBundle\AppBundle(),
+            new Tedivm\StashBundle\TedivmStashBundle(),
+            new ONGR\CurrencyExchangeBundle\ONGRCurrencyExchangeBundle(),
         ];
 
         if (in_array($this->getEnvironment(), ['dev', 'test'], true)) {

app/Resources/scripts/components/loader.js

@@ -0,0 +1,33 @@
+/*
+ * This file is part of the ONGR package.
+ *
+ * (c) NFQ Technologies UAB <info@nfq.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+"strict mode";
+
+(function($, window) {
+
+    var Loader = function(loaderContainer) {
+        var container = loaderContainer;
+        var loaderTmpl = "<div class='loader'>Loading</div>";
+
+        return {
+            start: function() {
+                $(container).append(loaderTmpl);
+                $(container).addClass('loader-container');
+            },
+            stop: function() {
+                $(container).find('.loader').remove();
+                $(container).removeClass('loader-container');
+            }
+        };
+    };
+
+    window.Ongr = window.Ongr || {};
+    window.Ongr.Components = {Loader: Loader};
+
+})(jQuery, window);

app/Resources/scripts/main.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 
-(function($) {
+(function($, Ongr) {
     var ONGR = {
         /**
          * Global DOM selectors
@@ -61,6 +61,9 @@
             this.bindFooterDropdown(g.footerDropdown);
 
             this.bindScrollTop(g.scrollTop);
+
+            var product = Ongr.Pages.Product();
+            product.init();
         },
 
         /**
@@ -203,5 +206,4 @@
     };
 
     var App = Object.create(ONGR); App.init();
-})(jQuery);
-
+})(jQuery, Ongr);

app/Resources/scripts/pages/product.js

@@ -0,0 +1,36 @@
+/*
+ * This file is part of the ONGR package.
+ *
+ * (c) NFQ Technologies UAB <info@nfq.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+"strict mode";
+
+(function($, window) {
+
+    var Product = function() {
+        var locale = appLocale;
+        var selectors = {
+            images:      '.image-select',
+            mainImage:   '.product-image',
+        };
+
+        var bindImageSlider = function(images, mainImage) {
+            $(images).on('click', function(){
+                $(mainImage).attr('src', $(this).attr('src'));
+            });
+        };
+        return {
+            init: function() {
+                bindImageSlider(selectors.images, selectors.mainImage);
+            }
+        };
+    };
+
+    window.Ongr = window.Ongr || {};
+    window.Ongr.Pages = {Product: Product};
+
+})(jQuery, window);

app/Resources/scripts/services/product.js

@@ -0,0 +1,49 @@
+/*
+ * This file is part of the ONGR package.
+ *
+ * (c) NFQ Technologies UAB <info@nfq.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+"strict mode";
+
+(function($, window) {
+
+    var Product = function() {
+
+        var setApiGetProductUrl = function(id) {
+            return Routing.generate('ongr_api_v3_product_get',
+                {documentId: id}
+            );
+        };
+
+        var setApiGetProductVariantUrl = function(id) {
+            return Routing.generate('ongr_api_v3_product_get_variant',
+                {
+                    documentId: id
+                }
+            );
+        };
+
+        return {
+            get: function(id) {
+                return $.ajax({
+                    url: setApiGetProductUrl(id),
+                    method: 'GET'
+                });
+            },
+            getVariants: function(id) {
+                return $.ajax({
+                    url: setApiGetProductVariantUrl(id),
+                    method: 'GET'
+                });
+            }
+        };
+    };
+
+    window.Ongr = window.Ongr || {};
+    window.Ongr.Services = {Product: Product};
+
+})(jQuery, window);

app/Resources/style/common/_loaders.scss

@@ -0,0 +1,69 @@
+%extend_loader_1 {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: load 1.8s infinite ease-in-out;
+}
+
+%extend_loader_2 {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+@-webkit-keyframes load {
+  0% {
+    box-shadow: 0 2.5em 0 -1.3em $loader_color_base;
+  }
+  80% {
+    box-shadow: 0 2.5em 0 -1.3em $loader_color_base;
+  }
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em $loader_color_base;
+  }
+  40% {
+    box-shadow: 0 2.5em 0 0 $loader_color_base;
+  }
+}
+
+@keyframes load {
+  0% {
+    box-shadow: 0 2.5em 0 -1.3em $loader_color_base;
+  }
+  80% {
+    box-shadow: 0 2.5em 0 -1.3em $loader_color_base;
+  }
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em $loader_color_base;
+  }
+  40% {
+    box-shadow: 0 2.5em 0 0 $loader_color_base;
+  }
+}
+
+.loader-container {
+  position: relative;
+  opacity: $loader_opacity;
+}
+
+.loader {
+  @extend %extend_loader_1;
+  font-size: 10px;
+  margin: 30% auto;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+  &:before {
+    @extend %extend_loader_1;
+    left: -3.5em;
+    animation-delay: -0.32s;
+    @extend %extend_loader_2;
+  }
+  &:after {
+    @extend %extend_loader_1;
+    left: 3.5em;
+    @extend %extend_loader_2;
+  }
+}

app/Resources/style/common/_variables.scss

@@ -0,0 +1,27 @@
+//colors
+$color_storm_dust_approx: #666;
+$color_mercury_approx: #e6e6e6;
+$color_quicksand_approx: #c5988b;
+$color_submarine_approx: #bdc2c9;
+$color_tapa_approx: #7a7975;
+$white: #fff;
+$color_cinnabar_approx: #e1423c;
+$color_bon_jour_approx: #e0e0e0;
+$color_alto_approx: #ddd;
+$color_gallery_approx: #eee;
+$color_mango_tango: #E57300;
+
+//fonts
+$font_0: Georgia;
+$font_1: Gerogia;
+$font_base: 14px;
+
+// padding
+$padding-base: 1.5em;
+
+// Loader
+$loader_color_base: $color_mango_tango;
+$loader_opacity : 0.5;
+
+// pages
+$body_background: #f9f9f9;