templates/shop/product.html.twig line 1

  1. {% extends 'base.html.twig'%}
  3. {% block title %}Print Shop - TeeVerse Photography{% endblock %}
  5. {% block stylesheets %}
  7. <link rel="stylesheet" type="text/css" href="/css/shop/stylesheet.css">
  8. <link rel="stylesheet" type="text/css" href="/css/shop/product.css">
  9. <link rel="stylesheet" type="text/css" href="/css/shop/artPrint.css">
  11. {% endblock %}
  13. {% block body %}
  14. <div class="page" style="text-align: center;">
  16.   <h1><a href="/shop">Print Shop</a></h1>
  18.   {# <nav id="breadcrumbContainer">
  19.     <ul class="breadcrumblist breadcrumbListLong">
  20.       <li id="breadcrumbBackLink" style="max-width: none;">
  21.         <a href="">Abstract Ink Paintings in Color Framed Art Prints</a>
  22.       </li>
  23.       <li id="breadcrumbBackPipe" style="padding-left: 8px; padding-right: 10px;">|</li>
  24.       <li class="breadcrumbLink">
  25.         <a href="">Shop</a>
  26.       </li>
  27.       <li class="breadcrumbLink">
  28.         <a href="">Wall Art</a>
  29.       </li>
  30.       <li class="breadcrumbLink">
  31.         <a href="">Framed Prints</a>
  32.       </li>
  33.       <li class="breadcrumbLink">
  34.         <a href="">Ink Framed Prints</a>
  35.       </li>
  36.     </ul>
  37.   </nav> #}
  39.   <main class="container mainContainerDiv">
  40.     {# <div id="previousNextDivTop">
  41.       <a href="">
  42.         <img src="/assets/images/shop/NavigationArrowLeft.png" style="display: inline-block; vertical-align: middle; max-height: 10px; padding-right: 7px; border: none;">
  43.       </a>
  44.       <p style="display: inline-block; font: 10pt arial; vertical-align: middle;">
  45.         <a id="linkprevious" href="" style="font: 11pt arial; font-weight: bold; color: #666666; text-shadow: none; letter-spacing: 0px;">PREV</a>
  46.       </p>
  47.       <p style="display: inline-block; padding-left: 8px; padding-right: 6px; font: 11pt arial; color: #666666; vertical-align: middle;">|</p>
  49.       <div id="productCountContainerDiv">
  50.         <p style="display: inline-block; font: 10pt arial; color: #666666; vertical-align: middle;">1 of 24</p>
  51.         <p style="display: inline-block; padding-left: 8px; padding-right: 6px; font: 10pt arial; color: #666666; vertical-align: middle;">|</p>
  52.       </div>
  54.       <p style="display: inline-block; font: 10pt arial; vertical-align: middle;">
  55.         <a id="linknext" href="tion-of-time-expanding-into-free-space-phase-two-number-29-m-mellon.html?product=framed-print" style="font: 11pt arial; font-weight: bold; color: #666666; text-shadow: none; letter-spacing: 0px;">NEXT</a>
  56.       </p>
  57.       <a href="">
  58.         <img src="/assets/images/shop/NavigationArrowRight.png" style="display: inline-block; padding-left: 5px; vertical-align: middle; max-height: 10px; padding-left: 9px; border: none;">
  59.       </a>
  60.     </div> #}
  62.     <div class="leftdiv">
  63.       <img id="productPreviewImage" src="/uploads/medium/{{product.getThumbnailImage.filename}}"  width="1200" height="1350">
  64.       <div id="additionalImageContainerDiv">
  65.         {# <div class="additionalImageDiv additionalImageImageDiv">
  66.             <img id="additionalImage2" class="additionalProductImage" src="/uploads/low/{{product.getThumbnailImage.filename}}">
  67.         </div> #}
  68.         {% for image in product_images %}
  69.           <div class="additionalImageDiv additionalImageImageDiv">
  70.             <img id="additionalImage2" class="additionalProductImage" src="/uploads/low/{{image.filename}}">
  71.           </div>
  72.         {% endfor %}
  73.       </div>
  75.       <div id="dimensionContainerDiv">
  76.         <div class="productOption" id="productDescription">
  77.           <p class="optionTitle">Product Details</p>
  78.           <p id="aboutProductDescription">
  79.             {{ product.legend|nl2br}}
  80.           </p>
  81.         </div>
  82.       </div>
  83.     </div>
  86.     <div class="rightdiv">
  87.       <div id="previousNextDivContainer">
  88.         <div id="previousNextDiv" style="">
  89.           <p><a id="linkprevious" href="">PREV</a></p>
  90.           <p id="verticalLine">|</p>
  91.           <p><a id="linknext" href="">NEXT</a></p>
  92.         </div>
  93.       </div>
  95.       <div style="display: inline-block; width: 100%; text-align: left; padding-top: 20px; padding-bottom: 20px; margin-bottom: 15px; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;">
  96.         <h1 class="h1title">{{ product.title }}</h1>
  98.         <div id="artistHeadshotAndNameDiv">
  99.           <a target="_blank" href="/about">
  100.             <img id="artistHeadshot" src="/assets/images/Thais_icon.jpg" width="200" height="200">
  101.           </a>
  102.           <p id="artistName"> by 
  103.             <a target="_blank" href="/about" style="font: inherit; font-weight: bold; color: #444444;">Thaïs Verhasselt</a>
  104.           </p>
  105.         </div>
  106.       </div>
  108.       <div id="pricediv">
  109.         <div style="float: left; width: 100%;">
  110.           <div style="display: flex; justify-content: space-between; overflow: hidden; margin-bottom: 20px;">
  111.             <div style="padding-top: 0px;">
  112.               <p class="price">
  113.                 <span id="productCurrency">£</span><span id="productPrice">{{ product.price }}</span>
  114.               </p>
  115.             </div>
  116.             <input type="number" id="quantity" step="1" min="1" max="{{ product.quantity }}" name="quantity" value="1" class="quantity" size="4" pattern="" inputmode="">
  118.           </div>
  119.           {# <button type="button" id="buttonaddtocart" onclick="globalAddToCartUniqueId();">ADD TO CART</button> #}
  121.           <!-- Include the PayPal JavaScript SDK; replace "test" with your own sandbox Business account app client ID -->
  123.             <script src="https://www.paypal.com/sdk/js?client-id=Aca5FjlLCDkbT8TLKtXhoBriHqHw4FA8ZqzFXWOzQCfcGlTi2RDp2rPfPm7PYKBLQxEGoAwS6qQWCuLc&currency=GBP"></script>
  125.             <!-- Set up a container element for the button -->
  127.             <div id="paypal-button-container"></div>
  130.             <script>
  131.               paypal.Buttons({
  134.                 // Sets up the transaction when a payment button is clicked
  136.                 createOrder: function(data, actions) {
  138.           
  140.                   var productName = "{{ product.title }}";
  141.                   var productPrice = document.getElementById('productPrice').innerHTML;
  142.                   var productQuantity = document.getElementById('quantity').value;
  144.                   console.log(productName);
  145.                   console.log(productPrice);
  146.                   console.log(productQuantity);
  148.                   return actions.order.create({
  150.                     purchase_units: [{
  152.                       amount: {
  154.                         value: productPrice*productQuantity,
  155.                         currency_code: 'GBP',
  156.                         breakdown: {
  157.                           item_total: {
  158.                               currency_code: "GBP",
  159.                               value: productPrice*productQuantity
  160.                           }
  161.                         },
  162.                         description: "teeverse-photography.com order"
  163.                       },
  165.                       items: [{
  167.                         name: productName,
  168.                         unit_amount: {
  169.                             currency_code: "GBP",
  170.                             value: productPrice,
  171.                         },
  172.                         quantity: productQuantity
  173.                       }],
  175.                     }]
  177.                   });
  179.                 },
  182.                 // Finalize the transaction after payer approval
  184.                 onApprove: function(data, actions) {
  186.                   return actions.order.capture().then(function(orderData) {
  188.                     actions.redirect('https://teeverse-photography.com/shop/thank_you');
  190.                   });
  192.                 }
  194.               }).render('#paypal-button-container');
  197.             </script>
  199.         </div>
  200.       </div>
  201.     
  202.       <div id="menudiv">
  203.         <div id="artPrintMenuSimple">
  204.           <div id="simplePrintSizeContainerDiv" class="simpleContainerDiv" data-sizes-visible="0" data-cropping-allowed="1" data-shapes-visible="0">
  205.             <div id="buttonSimplePrintSizeContainerDiv">
  206.               <p class="simpleTitle">Print Size</p>
  207.               <button id="buttonSimpleSelectedPrintSize" class="buttonSimple">
  208.                 {{ product.size }}
  209.               </button>
  210.             </div>
  211.             
  212.             <div id="buttonSimplePrintShapeContainerDiv">
  213.               <p class="simpleTitle">Paper</p>        
  214.               <button id="buttonSimpleSelectedPrintShape" class="buttonSimple">
  215.                 {{ product.paper }}
  216.               </button>    
  217.             </div>
  218.           </div>
  219.               
  220.           <div id="simpleFrameContainerDiv" class="simpleContainerDiv" data-frames-visible="0" data-frame-selected="1" data-frame-colors-visible="0">
  222.             <p class="simpleTitle">
  223.               Format
  224.             </p>
  225.               
  226.             <button id="buttonSimpleSelectedFrame" class="buttonSimple" onclick="toggleAvailableFrames();">
  227.               <span id="buttonSimpleSelectedFrameText">{{ product.format }}</span>
  228.             </button>        
  229.               
  230.             <div id="simpleFrameOptionsContainerDiv">
  231.               <div id="buttonSimpleSelectedFrameColorContainerDiv">
  232.                         
  233.                 <p class="simpleTitle">Frame Colors</p>
  235.                 <button id="buttonSimpleSelectedFrameColor" class="buttonSimple" onclick="toggleAvailableFrameColors();">
  236.                   Most Popular
  237.                 </button>     
  239.                 <div id="simpleFrameColorOptionsContainerDiv">
  240.                   <button id="buttonSimpleFrameColor_popular" class="buttonSimpleFrameColor buttonSimpleFrameColorSelected" data-frame-color-name="Most Popular" onclick="simpleSelectFrameColor('popular');">
  241.                   Most popular
  242.                   </button>                 
  243.                   <button id="buttonSimpleFrameColor_Black" class="buttonSimpleFrameColor" data-frame-color-name="Black" onclick="simpleSelectFrameColor('Black');">
  244.                     Black
  245.                   </button>                 
  246.                   <button id="buttonSimpleFrameColor_Brown" class="buttonSimpleFrameColor" data-frame-color-name="Brown" onclick="simpleSelectFrameColor('Brown');">
  247.                     Brown
  248.                   </button>                 
  249.                   <button id="buttonSimpleFrameColor_Gold" class="buttonSimpleFrameColor" data-frame-color-name="Gold" onclick="simpleSelectFrameColor('Gold');">
  250.                     Gold
  251.                   </button>                 
  252.                   <button id="buttonSimpleFrameColor_Gray" class="buttonSimpleFrameColor" data-frame-color-name="Gray" onclick="simpleSelectFrameColor('Gray');">
  253.                     Gray
  254.                   </button>                 
  255.                   <button id="buttonSimpleFrameColor_Red" class="buttonSimpleFrameColor" data-frame-color-name="Red" onclick="simpleSelectFrameColor('Red');">
  256.                     Red
  257.                   </button>                 
  258.                   <button id="buttonSimpleFrameColor_Silver" class="buttonSimpleFrameColor" data-frame-color-name="Silver" onclick="simpleSelectFrameColor('Silver');">
  259.                     Silver
  260.                   </button>                 
  261.                   <button id="buttonSimpleFrameColor_White" class="buttonSimpleFrameColor" data-frame-color-name="White" onclick="simpleSelectFrameColor('White');">
  262.                     White
  263.                   </button>                 
  264.                   <button id="buttonSimpleFrameColor_Yellow" class="buttonSimpleFrameColor" data-frame-color-name="Yellow" onclick="simpleSelectFrameColor('Yellow');">
  265.                     Yellow
  266.                   </button>
  267.                 </div>
  268.               </div>
  269.                   
  270.               <button class="buttonSimpleFrame" id="simpleFrame_noFrame" data-frameid="noFrame" data-framename="None" data-frameimageurl="/assets/images/optionNone.jpg" onclick='simpleSelectFrame("noFrame");'>
  271.                 <img id="simpleFrameImage[noFrame]" class="simpleFrameImage lazy" src="/assets/images/shop/Blank.jpg" data-src="/assets/images/optionNone.jpg" alt="noFrame - None" title="noFrame - None">
  272.               </button>
  273.               <button class="buttonSimpleFrame buttonSimpleFrameSelected" id="simpleFrame_CRQ13" data-frameid="CRQ13" data-framename="CRQ13" data-frameimageurl="/frames/CRQ13_l.jpg" onclick='simpleSelectFrame("CRQ13");'>
  274.                 <img id="simpleFrameImage[CRQ13]" class="simpleFrameImage lazy" src="/assets/images/shop/Blank.jpg" data-src="/frames/CRQ13_l.jpg" alt="CRQ13 - CRQ13 - Black Wood" title="CRQ13 - CRQ13 - Black Wood">
  275.               </button>
  276.               <button class="buttonSimpleFrame" id="simpleFrame_GG1" data-frameid="GG1" data-framename="GG1" data-frameimageurl="/frames/GG1_l.jpg" onclick='simpleSelectFrame("GG1");'>
  277.                 <img id="simpleFrameImage[GG1]" class="simpleFrameImage lazy" src="/assets/images/shop/Blank.jpg" data-src="/frames/GG1_l.jpg" alt="GG1 - GG1 - Black w/ Gold" title="GG1 - GG1 - Black w/ Gold">
  278.               </button>
  279.               <button class="buttonSimpleFrame" id="simpleFrame_SM2" data-frameid="SM2" data-framename="SM2" data-frameimageurl="/frames/SM2_l.jpg" onclick='simpleSelectFrame("SM2");'>
  280.                 <img id="simpleFrameImage[SM2]" class="simpleFrameImage lazy" src="/assets/images/shop/Blank.jpg" data-src="/frames/SM2_l.jpg" alt="SM2 - SM2 - Black w/ Gold" title="SM2 - SM2 - Black w/ Gold">
  281.               </button>
  282.               <button class="buttonSimpleFrame" id="simpleFrame_SLW6" data-frameid="SLW6" data-framename="SLW6" data-frameimageurl="/frames/SLW6_l.jpg" onclick='simpleSelectFrame("SLW6");'>
  283.                 <img id="simpleFrameImage[SLW6]" class="simpleFrameImage lazy" src="/assets/images/shop/Blank.jpg" data-src="/frames/SLW6_l.jpg" alt="SLW6 - SLW6 - Black w/ Silver" title="SLW6 - SLW6 - Black w/ Silver">
  284.               </button>
  285.               <button class="buttonSimpleFrame" id="simpleFrame_SLW5" data-frameid="SLW5" data-framename="SLW5" data-frameimageurl="/frames/SLW5_l.jpg" onclick='simpleSelectFrame("SLW5");'>
  286.                 <img id="simpleFrameImage[SLW5]" class="simpleFrameImage lazy" src="/assets/images/shop/Blank.jpg" data-src="/frames/SLW5_l.jpg" alt="SLW5 - SLW5 - Black w/ Gold" title="SLW5 - SLW5 - Black w/ Gold">
  287.               </button>
  288.               <button class="buttonSimpleFrame" id="simpleFrame_GO3" data-frameid="GO3" data-framename="GO3" data-frameimageurl="/frames/GO3_l.jpg" onclick='simpleSelectFrame("GO3");'>
  289.                 <img id="simpleFrameImage[GO3]" class="simpleFrameImage lazy" src="/assets/images/shop/Blank.jpg" data-src="/frames/GO3_l.jpg" alt="GO3 - GO3 - Deep Profile - Candian Walnut" title="GO3 - GO3 - Deep Profile - Candian Walnut">
  290.               </button>        
  291.             </div>
  292.           </div>
  293.         </div>           
  294.       </div>
  295.     </div>
  297.     {# <div class="bottomSection">
  298.       <h2>Print Tags</h2>
  299.       <a class="buttonTag" href="">wall art</a>
  300.       <a class="buttonTag" href="">framed prints</a>
  301.     </div> #}
  303.     <div class="bottomSection">
  304.         <div>
  305.           <a href="/about">
  306.             <img src="/assets/images/Thais_icon.jpg">
  307.           </a>
  308.           <h2>About Thaïs Verhasselt</h2>
  309.         </div>
  311.         <p>
  312.           "I am a Photographer and Visual Artist based in Portsmouth, England. 
  313.           I am not sure which came first, my thirst for adventures or my sensitivity to great stories. 
  314.           Surrounding myself with great story-tellers adds sparkles to my surge of inspiration and creativity. 
  315.           For me, the photography medium is foremost an enabler to human connections with its environment and inner feelings."
  316.         </p>
  317.     </div>
  319.     <div class="bottomSection">
  321.         <h2>Shop with Confidence</h2>
  323.         <p>
  324.           I take pride in the prints and other products I create. 
  325.           I will be proofing all of the products individually before shipping them over to you. 
  326.           If you're not happy with a purchase that you made on my website, for any reason, please be in touch first to discuss options. 
  327.           I will get back to you within 3-4 days.
  328.         </p>
  329.     </div>
  331.     <div class="bottomSection" >  
  332.       <h2>Delivery</h2>
  333.       <p>
  334.         All the products are printed in limited numbers to ensure the highest quality finish. 
  335.         Shipping costs may vary depending on your location and would be added to the final price of your order. 
  336.         You should receive your order within <b>5-9 business days</b>.
  337.       </p>
  338.     </div>
  339.   </main>
  340. </div>
  341. {% endblock %}
  343. {% block javascripts %}
  344. <script>
  345.     var preview = document.getElementById('productPreviewImage');
  346.     var images = document.getElementsByClassName("additionalProductImage");
  348.     var myFunction = function() {
  349.       var attribute = this.getAttribute("src");
  350.       preview.src = attribute;
  351.     };
  353.     for (var i = 0; i < images.length; i++) {
  354.       images[i].addEventListener('click', myFunction, false);
  355.     }
  356. </script>
  357. {% endblock %}