Customer Success Portal
            Knowledge Base Truvi Commerce Website Content Website Pages

            Remote Tags

            Javascript
            This will be placed in the header of the website on the pages that will have the add to cart button.
            Please note: you will also need to ensure you have included jquery in your markup.
             <script> var website = "http://sitename.simplycms.com/"; </script> 
            <script type="text/javascript" src="http://sitename.simplycms.com/js/addtocartwidget.js"></script> 

            CSS
            You can style the outputted content using these classes.
            <style>
            .simply-pro-wrapper *{margin:0px; padding:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-family:Arial, Helvetica, sans-serif;}
            .simply-btn{padding:5px 10px; border:solid 1px #666; background-color:#FFF; border-radius:0px; display:inline-block; text-decoration: none; color: inherit;}
            .simply-btn:hover{background-color:#333; color:#FFF; cursor:pointer; border-color:#333;}
            .simply-pro-wrapper .pro-item{width:300px;}
            .simply-pro-wrapper .pro-item .image{margin-bottom:6px;}
            .simply-pro-wrapper .pro-item .image img{vertical-align:middle;}
            .simply-pro-wrapper .pro-item .details ul{margin-bottom:10px;}
            .simply-pro-wrapper .pro-item .details ul li{list-style-type:none;}
            .simply-pro-wrapper .pro-item .details p{font-size:14px; color:#666; line-height:150%; margin-bottom:10px;}
            .simply-pro-wrapper .pro-item .details h3{font-size:20px; line-height:normal; margin-bottom:8px; color:#C87C23;}
            .simply-pro-wrapper .pro-item .details p.price{line-height:normal; margin-bottom:7px; font-size:10px;}
            .simply-pro-wrapper .pro-item .details p.price span{font-size:14px;}
            .simply-pro-wrapper .pro-item .details .cart-area{margin-bottom:15px;}
            .simply-pro-wrapper .pro-item .details .cart-area:after{clear:both; display:block; content:"";}
            .simply-pro-wrapper .pro-item .details ul.np{height:30px; float:left; margin:0px 10px 0px 0px;}
            .simply-pro-wrapper .pro-item .details ul.np li{height:30px; width:20px; line-height:30px; float:left; background-color:#9F9F9F; color:#FFF; text-align:center;}
            .simply-pro-wrapper .pro-item .details ul.np li a:hover{background-color:#333;}
            .simply-pro-wrapper .pro-item .details ul.np li a{display:block; color:#FFF; text-decoration:none;}
            .simply-pro-wrapper .pro-item .details ul.np li.tf{width:40px; line-height:normal;}
            .simply-pro-wrapper .pro-item .details ul.np li.tf input{height:30px; width:100%; margin:0px; text-align:center; background-color:#F5F5F5; border:0px;}
            .simply-pro-wrapper .pro-item .details .cart-area .simply-btn{float:left;}
            .simply-overlay{position:fixed; top:0px; left:0px; z-index:100; width:100%; height:100%; background-color:rgba(0,0,0,0.70); display:none;}
            .simply-modal-dialog{width:560px; overflow:hidden; border-radius:7px; font-family:Arial, Helvetica, sans-serif; background-color:#FFF; font-size:14px; font-weight:normal;
            position:fixed; top:-100%; left:50%; margin-left:-280px; z-index:1010; transition:all 0.6s ease; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease;}
            .simply-modal-dialog.visible{top:100px;}
            .simply-modal-dialog .close-icon{position:absolute; top:13px; right:15px; font-size:15px; color:#900; font-weight:bold; text-shadow:1px 1px 0px #FFF; font-family:Tahoma, Geneva, sans-serif; cursor:pointer;}
            .simply-modal-dialog .close-icon:hover{color:#000;}
            .simply-modal-dialog h2{border-bottom:solid 1px #CCC; padding:13px 15px; font-size:18px; color:#333; margin: 0px;}
            .simply-modal-dialog .body{padding:20px 15px;}
            .simply-modal-dialog .body table{width:100%;}
            .simply-modal-dialog .body table th{text-align:left; padding: 6px 10px; background-color:#DDD;}
            .simply-modal-dialog .body table td{text-align:left; font-size:13px; border-bottom: solid 1px #CCC; padding: 6px 10px;}
            .simply-modal-dialog .body table tr:last-child td{border-bottom:0px; font-weight: bold;}
            .simply-modal-dialog .bottom{background-color:#EEE; border-top:solid 1px #FFFFFF; box-shadow:0px -1px 0px #DDDDDD; padding:13px 15px; text-align:right;}    
            </style>


            HTML Body
            This is the code that you place to output the add to cart button for an individual SKU. All that needs to be done is to replace the data-product SKU with the SKU that is setup in truvi. This will output an add to cart option.

            You will see a different data-producttype of wine, bundle or non-wine. This is used to determine the type of product that is setup in truvi.
            <div class="pro-item" data-producttype="wine" data-productsku="abc" data-scmsremotejs="addToCartForm">
            <div class="pro-item" data-producttype="bundle" data-productsku="xyz" data-scmsremotejs="addToCartForm">
            <div class="pro-item" data-producttype="nonwine" data-productsku="xyz" data-scmsremotejs="addToCartForm">

            Updated: 07 Sep 2018 06:09 AM
            Helpful?  
            Help us to make this article better
            0 0