workarea-image_decoration 1.0.0.pre

data/app/assets/stylesheets/workarea/storefront/products/components/create_your_own.scss

@@ -0,0 +1,38 @@
+.grid__cell.grid__cell--60-at-medium{
+	font-size: 5rem;
+}
+
+.img-responsive{
+	width: 11em !important;
+	height: 8em !important;
+}
+
+.description{
+	display: none;
+	border: 3px solid #dddddd;
+	padding: 1rem;
+}
+.shipping{
+	display: none;
+	border: 3px solid #dddddd;
+	padding: 1rem;
+}
+
+.img{
+	width: 4em !important;
+	position: absolute;
+	right: 600px;
+    top: 75%;
+}
+.button-submit{
+	background: #132de8bd;
+}
+
+.button-panel{
+	width: 36em;
+	text-align: left;
+	border: 0;
+	padding: 10px 16px;
+	background: #302f336b;
+	font-size: 1.5rem;
+}

data/app/controllers/workarea/storefront/products_controller.decorator

@@ -0,0 +1,33 @@
+module Workarea
+  decorate Storefront::ProductsController, with: :murals_your_way do
+
+    def create_your_own
+      model = Catalog::Product.find_by(slug: params[:product_id])
+      raise InvalidDisplay unless model.active? || current_user.try(:admin?)
+
+      @product = Storefront::ProductViewModel.wrap(
+        model,
+        view_model_options
+        )
+    end   
+
+    def update_image
+      model = Catalog::Product.find_by(slug: params[:product_id])
+      @product = Storefront::ProductViewModel.wrap(model, view_model_options)
+      @image = model.images.build(update_params)
+            
+      if @image.save
+        redirect_to product_create_your_own_path(@product)
+      else
+        render :index, status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def update_params
+      params.require(:catalog_product).permit(:image) 
+    end 
+
+  end
+end

data/app/models/workarea/catalog/product_image.decorator

@@ -0,0 +1,15 @@
+module Workarea
+  decorate Catalog::ProductImage, with: :murals_your_way do
+
+    decorated do
+    	extend Dragonfly::Model
+
+	    field :image_uid, type: String
+
+	    dragonfly_accessor :image, app: :workarea
+
+	    validates_size_of :image, maximum: 500.megabytes
+		end
+
+  end
+end

data/app/view_models/workarea/storefront/product_templates/image_decoration_view_model.rb

@@ -0,0 +1,16 @@
+module Workarea
+  module Storefront
+    module ProductTemplates
+      class ImageDecorationViewModel < ProductViewModel
+
+        # Override method from model in order to
+        # prepend the template type to the name of
+        # the product.
+        #
+        def name
+          [template, model.name].join(' ')
+        end
+      end
+    end
+  end
+end

data/app/views/workarea/storefront/products/create_your_own.html.haml

@@ -0,0 +1,97 @@
+- content_for :breadcrumbs do
+
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= 'create your own murals'
+
+.grid.grid--rev
+  .grid__cell.grid__cell--40-at-medium
+    %p
+      %h3 Create Your Own Wall Mural
+    %p
+      %h3 $120.00
+    %hr
+    %br
+    %label
+      %h5 1. Upload File *
+      %p.description-container
+        We accept all .png, .jpg, .jpeg, .tif, .svg types of files. For different file types (.ai, .eps, .psd, .tiff, .pdf, or .psb files), please use our
+        CYO File Upload Form 
+
+      = form_for(@product.model, url: product_update_image_path(@product), method: :post) do |form|
+        .property
+          = form.label :image, 'Image'
+          .value= form.file_field :image
+        = form.submit 'submit', value: 'Submit', class: 'button-submit'
+
+    %br
+    = append_partials('storefront.create_your_own', product: @product)
+
+
+  .grid__cell.grid__cell--60-at-medium  
+    .product-img-box
+      .product-images
+        %div
+          %img.img-responsive{:alt => "Create Your Own Wall Mural", :src => "#{product_image_url(@product.images.last, :zoom)}", data: {'grayscale-target': '', 'flipimage-target': ''}}/
+        
+        .panel
+          %div
+            = button_tag 'Description', value: 'description', class: 'button-panel', id: "create"
+            .description{:id => "own-create"}
+              %label
+                %h5 Upload
+                %p.description-container
+                  1. Upload a photo or design you have created. For information on size, resolution, and how to get the best results, see our
+                  = succeed "." do
+                    %a{:href => "https://www.muralsyourway.com/mural-image-quality/"} Image Guidelines
+                %h5 Customize
+                %p.description-container
+                  2. Select your size, material and basic customization options. If you would like assistance with something more involved,
+                  = succeed "." do
+                    %a{:href => "/contacts"} Contact Us
+                %h5 Order
+                %p.description-container
+                  3. That's it! Once your order is placed, we will fulfill it within 5-7 days, and shipping within the Contiguous USA is free. Expedited and International shipping options are available.
+          
+          %div
+            = button_tag 'Shipping', value: 'shipping', class: 'button-panel', id: "ship"
+            .shipping{:id => "own-ship"}
+              %label
+                %h5 Printed and Shipped With Care
+                %p 
+                  Every mural purchased is one-of-a-kind and is printed on demand. We treat every order as a custom order to ensure that image quality, width to height ratio, and material quality exactly fit your needs. Orders are usually shipped within 4-7 business days. For an extra fee you can choose our special rush order option to get your mural shipped within 3 business days.
+                %h5 Free UPS Ground Shipping (in the contiguous 48 U.S. states)
+                %p 
+                  Murals Your Way offers Free UPS Ground Shipping for all mural orders shipping to the contiguous 48 U.S. states. For those really urgent timelines, we offer 2nd day air and overnight options for an extra charge. We also ship UPS Expedited to Alaska, Hawaii, and other U.S. properties, but there will be shipping charges to those destinations.
+                %h5 International Orders
+                %p
+                  We welcome all mural customers from around the world, and offer UPS Worldwide Shipping options. Call us for rates on international delivery or submit your shipping address within our checkout process. All murals shipped internationally may incur charges such as customs duties and import tax. All additional fees, duties and taxes will be paid directly by the customer. Most murals are shipped within 4-7 business days from the time of your order.
+                %h5 Rush Orders / Quicker Delivery
+                %p 
+                  We also offer a special rush order production service for an additional charge. This moves your mural order to the front of the line so that we can ship it out more quickly. Please contact us for pricing or submit your information within our shopping cart.
+                %h5 Packaging
+                %p 
+                  We take proper care to ensure that your mural is protected during shipping. Each mural comes rolled around a tube and then wrapped in a protective paper. The mural is then placed in a cardboard box along with protective plastic end caps and foam inserts. This packaging exceeds UPS and FedEx required standards. Our high-quality commercial grade murals will never arrive wrinkled.
+          .box
+            %label
+              %h5 Choose your size, select your material, and even customize the look of your wall mural!
+              %p
+                1.Custom Printing Murals for 40+ Years
+                %br
+                2.High Quality, Commercial Grade Materials
+                %br
+                3.Exceptional Customer Service
+                %br
+                4.Safe, Secure Shopping
+                %br
+                5.Free Ground Shipping in Contiguous US
+                %br
+                6.Fast Turnaround, Expedited Shipping & Rush Service Available
+              %p.help-text
+                Have questions? Give us a call or
+                = succeed "," do
+                  %a{:href => "/contacts"}
+                    %strong contact us
+              %img.img{:alt => "", :src => "https://www.muralsyourway.com/media/wysiwyg/love-it-guarantee-product-page.png"}/

data/app/views/workarea/storefront/products/shared/_custom_sizing.html.haml

@@ -0,0 +1,56 @@
+%link{href: "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.css", rel: "stylesheet"}
+%script{ src: "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.min.js"}
+
+%dl{class: "configurable-attr-renders form-pretty"}
+  %dt
+    %label
+      %h5 2. Choose Your Size
+  %dd
+    .form-list
+      .radio
+        %label
+          %input{type: "radio", name: "size", value: "small", checked: "checked", class: "js-size-option-small" , data: {width: "59",  height: "59"} }
+          %span
+            %strong Small:
+            %span{class: "size size-small"} 4'-11"W x 4'-11"H
+    .form-list
+      .radio
+        %label
+          %input{type: "radio", name: "size", value: "medium", class: "js-size-option-medium" , data: {width: "72",  height: "72"} }
+          %span
+            %strong Medium:
+            %span{class: "size size-medium"}   6'W x 6'H    
+    .form-list
+      .radio
+        %label
+          %input{type: "radio", name: "size", value: "large", class: "js-size-option-large" , data: {width: "96",  height: "96"} }
+          %span
+            %strong Large:
+            %span{class: "size size-large"}   8'W x 8'H
+    .js-size-custom
+      .form-list
+        .radio
+          %label
+            %input{type: "radio", name: "size", value: "custom", class: "js-size-option-custom" , data: {width: "-1",  height: "-1", target: ".scalable_main_image"} }
+            %span
+              %strong Enter Your Dimensions:
+            %span{class: "size size-custom"}
+      .form-list.custom-size-options
+        %ul
+          %li{class: "js-inputs-container js-inputs-container-width"}
+            %strong Width: 
+            %div
+              %input{type: "tel", min: "0", name: "size_custom_width_feet", id: "width_feet", class: "form-control size-input"}
+              %label{for: "width_feet", class: "control-label"} Feet
+            %div
+              %input{type: "tel", min: "0", name: "size_custom_width_inches", id: "width_inches", class: "form-control size-input"}
+              %label{for: "width_inches", class: "control-label"} Inches
+          %br
+          %li{class: "js-inputs-container js-inputs-container-height"}
+            %strong Height: 
+            %div
+              %input{type: "tel", min: "0", name: "size_custom_height_feet", id: "height_feet", class: "form-control size-input"}
+              %label{for: "height_feet", class: "control-label"} Feet
+            %div
+              %input{type: "tel", min: "0", name: "size_custom_height_inches", id: "height_inches", class: "form-control size-input"}
+              %label{for: "height_inches", class: "control-label"} Inches

data/app/views/workarea/storefront/products/shared/_material.html.haml

@@ -0,0 +1,37 @@
+%h4 3. Choose Your Material *
+
+.radio
+  %label
+    %input{type: "radio", name: "material", value: "a", checked: "checked"}/
+    %span
+      %strong Prepasted Wallpaper
+      %i.icon-prepasted-wallpaper
+    %p.material-desc Water activated adhesive backing. Applies quickly and removes clean. Smooth texture with a matte finish. (PVC Free - Class A Fire Rating)
+.radio
+  %label
+    %input{type: "radio", name: "material", value: "b", checked: "checked"}/
+    %span
+      %strong Eco Bella - Texture
+      %i.icon-prepasted-wallpaper
+    %p.material-desc Commercial grade wallcovering that is as durable as it is beautiful! Light texture with a matte finish. (PVC Free-Type II-Class A Fire Rating)
+.radio
+  %label
+    %input{type: "radio", name: "material", value: "c", checked: "checked"}/
+    %span
+      %strong SmartStick®
+      %i.icon-prepasted-wallpaper
+    %p.material-desc Removable, damage free wallcovering goes up fast and easy. No paste required. Smooth texture with a matte finish. (PVC Free - Class A Fire Rating)
+.radio
+  %label
+    %input{type: "radio", name: "material", value: "d", checked: "checked"}/
+    %span
+      %strong Vinyl HD - Texture
+      %i.icon-prepasted-wallpaper
+    %p.material-desc Commercial grade vinyl wallcovering great for high traffic areas. Textured surface with a matte finish. Top coat recommended. (Type II- Class A Fire Rating)
+.radio
+  %label
+    %input{type: "radio", name: "material", value: "e", checked: "checked"}/
+    %span
+      %strong VersaGrip (TM)
+      %i.icon-prepasted-wallpaper
+    %p.material-desc For indoor & outdoor walls & floors but NOT for drywall. Extremely durable peel & stick. Scratch resistant. Anti slip texture. Adheres to rough surfaces like concrete and brick. Not for drywall. (Class B Fire Rating)

data/app/views/workarea/storefront/products/shared/_optional_feature.html.haml

@@ -0,0 +1,37 @@
+%h4 OPTIONAL FEATURES
+
+%p
+  %input{type: "checkbox", name: "black and white",  value: "1", id: "blackid", data: {target: ".scalable_main_image", grayscale: ''}}/
+  1. Black and White
+%p
+  %input{type: "checkbox", name: "flip image", value: "2", id: "flipid", data: {target: ".scalable_main_image", flipimage: ''}}/
+  2. Flip Image
+%p
+  %input{type: "checkbox", name: "personalize", value: "3", id: "text"}/
+  3. Personalize
+  .personalize{:id => "add-text"}
+    %div
+      %strong Personalization
+      Add text: $25
+    .radio
+      %label
+        %input{:checked => "checked", :name => "personalization_type", :type => "radio", :value => "text"}/
+        %span Text
+      #personalization-text-option
+        %input{:name => "personalization_text"}/
+        %p
+          %label
+            Select Font
+          %br
+          %select{:name => "personalization_font"}
+            %option{:value => "Frutiger"} Frutiger
+            %option{:value => "Garamond"} Garamond
+            %option{:value => "Hobgoblin"} Hobgoblin
+            %option{:value => "Veneer"} Veneer
+            %option{:value => "Sugar Plums"} Sugar Plums
+            %option{:value => "Other"} Other
+        %p
+          %label Special Instructions
+          %br
+          %textarea{:cols => "30", :name => "personalization_instructions", :placeholder => "i.e. font color, font size, location of text", :rows => "3"}
+          %div After you place your order, Murals Your Way will send you a proof for your personalization.

data/app/views/workarea/storefront/products/shared/_pattern_repeat.html.haml

@@ -0,0 +1,44 @@
+%dl{class: "configurable-attr-renders form-pretty"}
+  %dt
+    %label
+      %h5 1. Choose Your Pattern Repeat
+  %table
+    %tr{class: "scalable-patterns radio"}
+     
+      %td
+        %label{class: "relative"}
+          .scalable-img.hundred{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}} 
+          %input{type: "radio", name: "pattern_repeat", value: "hundred", id:"scalable-patterns-A", checked: "checked"}
+        %span
+        %label{name: "pattern_repeat", for: "scalable-patterns-A", class:"pattern-name"} A
+     
+      %td
+        %label{class: "relative"}
+          .scalable-img.seventyfive{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}} 
+          %input{type: "radio", name: "pattern_repeat", value: "seventyfive", id:"scalable-patterns-B"}
+        %span
+        %label{name: "pattern_repeat", for: "scalable-patterns-B", class:"pattern-name"} B
+
+      %td  
+        %label{class: "relative"}
+          .scalable-img.fifty{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}} 
+          %input{type: "radio", name: "pattern_repeat", value: "fifty", id:"scalable-patterns-C"}
+        %span
+        %label{name: "pattern_repeat", for: "scalable-patterns-C", class:"pattern-name"} C
+      
+      %td
+        %label{class: "relative"}
+          .scalable-img.twentyfive{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}} 
+          %input{type: "radio", name: "pattern_repeat", value: "twentyfive", id:"scalable-patterns-D"}
+        %span
+        %label{name: "pattern_repeat", for: "scalable-patterns-D", class:"pattern-name"} D
+      %td
+        %label{class: "relative"}
+          .scalable-img.no-repeat{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}}
+          %input{type: "radio", name: "pattern_repeat", value: "no-repeat", id:"scalable-patterns-E"}
+          %div{ class: "no-repeat-pattern absolute", value: "full"}
+            %span{ class: "relative z-index-1"}
+              NO
+              %br REPEAT 
+          %span
+        %label{name: "pattern_repeat", for: "scalable-patterns-E", class:"pattern-name"} E

data/app/views/workarea/storefront/products/templates/_image_decoration.html.haml

@@ -0,0 +1,112 @@
+.grid.grid--rev
+  .grid__cell.grid__cell--60-at-medium
+
+    .product-details__name
+      %h1.product-details__heading= product.name
+      %h4= product.template
+      %p.product-details__id
+        %span= product.id
+
+    .product-prices.product-prices--details
+      = render 'workarea/storefront/products/pricing', product: product
+
+    = append_partials('storefront.product_pricing_details', product: product)
+
+    = append_partials('storefront.image_decoration', product: product)
+
+    - if product.description.present?
+      .product-details__description
+        %p= truncated_product_description(product, t('workarea.storefront.products.read_more'))
+
+    = form_tag cart_items_path, method: 'post', class: 'product-details__add-to-cart-form', data: { dialog_form: { dialogOptions: { closeAll: true, initModules: true } }, analytics: add_to_cart_analytics_data(product).to_json } do
+      = hidden_field_tag :product_id, product.id, id: dom_id(product, 'product_id')
+      = hidden_field_tag :via, params[:via], id: dom_id(product, 'via')
+
+      - if product.sku_options.one?
+        = hidden_field_tag :sku, product.sku_options.first.second
+
+      - else
+        .property
+          = label_tag :sku, nil, class: 'property__name', for: "sku_#{dom_id(product)}" do
+            %span.property__text= t('workarea.storefront.products.select_options')
+          .value
+            = select_tag :sku, options_for_select(product.sku_options, params[:sku]), required: true, id: "sku_#{dom_id(product)}", data: { product_details_sku_select: product.slug }
+        - if params[:sku].present?
+          %p.product-details__inventory-status= product.inventory_status
+
+      = append_partials('storefront.add_to_cart_form', product: product)
+
+      - if product.purchasable?
+        .product-details__quantity
+          .property
+            = label_tag :quantity, nil, class: 'property__name', for: "quantity#{dom_id(product)}" do
+              %span.property__text= t('workarea.storefront.products.quantity')
+            .value= number_field_tag :quantity, params[:quantity] || 1, class: 'text-box text-box--x-small', required: true, min: 1, id: "quantity#{dom_id(product)}"
+
+        %p.product-details__add-to-cart-action= button_tag t('workarea.storefront.products.add_to_cart'), value: 'add_to_cart', class: 'button button--large'
+
+      - else
+        = hidden_field_tag :quantity, params[:quantity] || 1, id: "quantity#{dom_id(product)}"
+        %p.product-details__unavailable= t('workarea.storefront.products.unavailable')
+
+    = append_partials('storefront.product_details', product: product)
+
+    %p.product-details__full-details=link_to t('workarea.storefront.products.view_full_details'), product_path(product, color: params[:color]), class: 'text-button'
+
+  .grid__cell.grid__cell--40-at-medium
+
+    .product-details__primary-image.has-overlayed-item
+      .scalable-img.scalable_main_image{style: "background-image: url('#{product_image_url(product.primary_image, :detail_a)}')", class: 'product-details__primary-image-link', data: {'grayscale-target': '', 'flipimage-target': ''}} 
+      .overlayed-item{id: "overlayed-item"}
+
+    .product-details__alt-images
+      .grid.grid--auto
+        .grid__cell
+          .product-details__alt-image
+            %table
+              %tr
+                
+                %td{class: "js-slider-item ben item thumbnail"}
+                  %div
+                    .item.first-preview{data:{ target: "#overlayed-item"}}
+                      .img-responsive{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}}
+                
+                %td{class: "js-slider-item"}
+                  .item.thumbnail
+                    .has-overlayed-item.overlay-item-ruler
+                      .relative
+                        .thumb-set-bg{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}}
+                      
+                        .img-responsive{src: "#{product_image_url(product.primary_image, :option_a)}"}
+                        .ruler-overlay
+               
+                %td
+                  .item.thumbnail
+                    .has-overlayed-item.detail-thumb{data:{ target: "#overlayed-item"}}
+                      .relative
+                        .thumb-zoom.thumb-set-bg{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}}
+                        
+                        .img-responsive{src: "#{product_image_url(product.primary_image, :option_a)}"}
+                        .ruler-overlay
+                        .detailed-view.absolute
+                          %span{ class: "relative z-index-1"}
+                            DETAILED
+                            %br VIEW
+                %td
+                  .item.living-overlay
+                    .has-overlayed-item.overlayed-item-3{data:{ target: "#overlayed-item"}}
+                      .relative
+                        .thumb-set-bg{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}}
+                          
+                        .img-responsive{src: "#{product_image_url(product.primary_image, :option_a)}"}
+                        .overlayed-item.overlayed-image-3 
+                %td
+                  .item.office_land-overlay
+                    .has-overlayed-item.overlayed-item-4{data:{ target: "#overlayed-item"}}
+                      .relative
+                        .thumb-set-bg{style: "background-image: url('#{product_image_url(product.primary_image, :option_a)}')", data: {'grayscale-target': '', 'flipimage-target': ''}}
+                       
+                        .img-responsive{src: "#{product_image_url(product.primary_image, :option_a)}"}
+                        .overlayed-item.overlayed-image-4
+          
+        = append_partials('storefront.product_details_alt_images', product: product)