v65:socialMediaLinks

<v65:socialMediaLinks></v65:socialMediaLinks>

Description: A widget allowing clients to update, add, and remove social media links on their website directly through the admin panel under Settings > Website Editor > Social Media Links.

HTML Source Output:

<ul class="v65-socialMediaLinks">
   <li><a href="URL HERE" target="_blank" aria-label="SOCIAL CHANNEL NAME"><span aria-hidden="true" class="fab ICON CLASS"></span></a></li>
   <li><a href="URL HERE" target="_blank" aria-label="SOCIAL CHANNEL NAME"><span aria-hidden="true" class="fab ICON CLASS"></span></a></li>
   <li><a href="URL HERE" target="_blank" aria-label="SOCIAL CHANNEL NAME"><span aria-hidden="true" class="fab ICON CLASS"></span></a></li>
</ul>

Base CSS

While you cannot directly edit the following CSS being applied, you can target any of the following classes and make updates through your own CSS files.

ul.v65-socialMediaLinks {
   padding: 0;
   margin: 0;
}

.v65-socialMediaLinks li {
   display: inline-block;
   list-style-type: none;
   margin-right: 15px;
   padding: 0;
}

.v65-socialMediaLinks a {
   font-size: 1.5em;
}

v65:pods

<v65:pods location="locationname"></v65:pods>

Description: Use this tag to pull a pod location into your template.

Creating Pod Locations: Pod locations are created in the website settings under the functions tab. Only users with developer level access can create pod locations. Select from the following options for the pod location.

Page Tree: Gives users the ability to apply pods to a specific page.
Allow Adding Pods: Gives users the ability to add or remove pods.
Allow Free Form Text: Creates a free form text pod location.
Allow Pod Image: Creates an image only pod. ( must also specify width and height)
Allow Link: Links may be applied to pod images, when 'Allow Pod Image' is checked.

Mandatory Attributes:

location: define the pod location you are calling in

usage: <v65:pods location="locationname"></v65:pods>

Optional Attributes:

type: specify what type of pod elements to display

default: "description"
usage: <v65:pods location="locationname" type="image,title,description"></v65:pods>

randomCount: randomize the pod and pass in how many to randomly return

default: none
usage: <v65:pods location="locationname" randomCount="3"></v65:pods>

wrapper: specify what to wrap your pod in

default: none
usage: <v65:pods location="locationname" wrapper="li"></v65:pods>

HTML Source Output:

<div class="v65-podTitle"><a href="yourlink">Pod Title</a></div>
<div class="v65-podImage"><a href="yourlink"><img src="../assets/images/pods/someimage.jpg" /></a></div>
<div class="v65-podDescription"><p>Pod Description</p></div>

Base CSS from vin65.css:
.v65-podTitle { }
.v65-podImage { }
.v65-podDescription { }

v65:logo

<v65:logo></v65:logo>

Description: Uses the image uploaded under Settings > Website Editor > Header & Footer > Logo. 

HTML Source Output:

<div class="v65-logo hideText">
    <a href="/" accesskey="h"><v65:websiteName></v65:websiteName> Home</a>
</div>

Customization

The logo upload size can be set under Settings > Website Settings > Content > General > Website Width and Website Height. When clients are uploading their logo, the field will automatically generate two images based off of the dimensions set. The dimensions you add will first generate a retina logo, then they will half in size and general a default logo for normal displays. 

For example: if you want your image to show on all retina and normal displays at 300px x 200px, please set the image dimensions to 600px x 400px.

Base CSS

While you cannot directly edit the following CSS that's being applied, you can target any of the following classes and make updates through your own CSS files.

.v65-logo {
   background-image: URL HERE;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   height: HEIGHT SET;
   position: relative;
   width: WIDTH SET;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
   .v65-logo {
      background-image: RETINA URL HERE;
   }
}

@media screen and (max-width: 33.75em) {
   .v65-logo {
      margin: 5em auto 2em;
      min-height: auto;
      width: 100%;
   }
}

.hideText {
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
}

.hideText a {
   display: block;
   height: 100%;
}

v65:pageTitle

<v65:pageTitle></v65:pageTitle>

Description: Outputs the title of the current page.

HTML Source Output:

Page Title

v65:mainContent

<v65:mainContent></v65:mainContent>

Description: Outputs the content of the current page.

HTML Source Output:

<p>Aenean mi erat, vehicula nec dapibus sit amet. Proin sit amet arcu ipsum.</p>

v65:contentBlock

<v65:contentBlock group="Group Name"></v65:contentBlock>

Description: Use this tag to display the items in a Content Block group.

v65:shippingWidget

<v65:shippingWidget></v65:shippingWidget>

Description: Used to display basic shipping information to a customer for a given state.

Optional Attributes:

maxRows: specify what type of pod elements to display

default: 5
usage: <v65:shippingWidget maxRows="5"></v65:shippingWidget>

stateCode: set the default state

default: "CA"
usage: <v65:shippingWidget stateCode="CA"></v65:shippingWidget>

shippingStrategyID: specify which shipping strategy to use if there is more than one

default: is the default shipping strategy
usage: <v65:shippingWidget shippingStrategyID="UUID"></v65:shippingWidget>

shippingTypeID: specify which shipping strategy to use if there is more than one

default: is the first shipping type in the default shipping strategy
usage: <v65:shippingWidget shippingTypeID="UUID"></v65:shippingWidget>

Html Output:

<div id="v65-shippingWidget">

      <form method="post" id="v65-shippingWidgetForm" action="/index.cfm?method=shipping.shippingWidget">

           <input type="hidden" name="shippingStrategyID" value="">
           <input type="hidden" name="shippingTypeID" value="">
           <input type="hidden" name="maxRows" value="5">

           <p>Shipping to:&nbsp;
                <select name="stateCode">
                   <option value="AL">AL</option>
                   <option value="AK">AK</option>  
                   <option value="AZ">AZ</option>  
                   <option value="AR">AR</option>  
                   <option value="CA" selected="">CA</option>  
                   .....  
                </select>
           </p>

     </form>

     <div id="v65-shippingWidgetResults">

          <table width="0" cellspacing="0" cellpadding="0" id="v65-shippingWidgetTable">
          <tbody>
                 <tr>
                    <th class="left">Quantity</th>
                    <th class="right">UPS Ground to CA</th>
                 </tr>
                  <tr class="altRow">
                     <td>1 Bottle</td>
                     <td class="right">$14.63</td>
                  </tr>
                  <tr>
                     <td>2 Bottles</td>
                     <td class="right">$16.07</td>
                  </tr>
                  <tr class="altRow">
                     <td>3 Bottles</td>
                     <td class="right">$17.50</td>
                  </tr> 
                  <tr>
                     <td>4 Bottles</td>
                     <td class="right">$19.25</td>
                  </tr> 
                  <tr class="altRow">
                     <td>5 Bottles</td>
                     <td class="right">$20.83</td>
                  </tr> 
            </tbody></table>

      </div>

</div>

Base CSS from vin65.css:

/*Shipping Widget*/
#v65-shippingWidget { padding: 0px 20px; }
#v65-shippingWidget select { width: 60px; }
#v65-shippingWidgetTable { width: 100%; }
#v65-shippingWidgetTable th { background-color: #666; color: #fff; font-size: 0.917em; padding: 4px; }
#v65-shippingWidgetTable td { color: #000; font-size: 0.917em; padding: 4px; }

v65:promoGroup

<v65:promoGroup category="pageKeyword" maxRows="" promoGroupElements="Title,Content" productElements="Title,Thumbnail,photo,sku,vintage,price,teaser,actionMessage,customerRatings,RPRating,
WSRating,WERating,CGRating,JHRating,STRating,WNRating,WAndSRating,WARating,WBRating,addToCart"></v65:promoGroup>

Description: This tag is used to display products outside of the store area on a site. (ie. like the homepage).

NOTE: this tag now has better alternatives such as Product Groups that are available if Products V3 is turned on.

Mandatory Attributes:

category: set the product category to display using the keyword of the page which is found in the Admin tab of the Page Properties

default: NA
usage: <v65:promoGroup category="pageKeyword" promoGroupElements="Title..." productElements="Title..."></v65:promoGroup>

promoGroupElements: which items to show from the page before the products are displayed

default: NA
usage: <v65:promoGroup category="pageKeyword" promoGroupElements="Title,Content" productElements="Title..."></v65:promoGroup>

productElements: specify which product elements to show and in which order.

default: NA
usage: <v65:promoGroup category="pageKeyword" promoGroupElements="Title,Content" productElements="Title,Thumbnail,photo,sku,vintage,price,teaser,actionMessage,customerRatings,RPRating,
WSRating,WERating,CGRating,JHRating,STRating,WNRating,WAndSRating,WARating,WBRating,addToCart"></v65:promoGroup>

Optional Attributes:

maxRows: specify how many to display

default: all
usage: <v65:promoGroup category="pageKeyword" maxRows="2" promoGroupElements="Title,Content" productElements="Title,Thumbnail,photo,sku"></v65:promoGroup>

Html Output:

<!--Promo Group Element Title-->
<div class="v65-promoGroupTitle"><a href="/Products/Red">Red</a></div>

<!--Promo Group Element Content-->
<div class="v65-promoGroupContent">
      <h1>Red Products</h1>
</div>

<!--Product Elements-->
<div class="v65-promoGroupProduct" v65js="productsForQuickview">

     <div class="v65-promoGroupProductTitle">
            <a href="/product/2004-Cabernet-Sauvignon-Reserve">2004 Cabernet Sauvignon Reserve</a>
     </div>
  
     <div class="v65-promoGroupProductThumbnail">
           <a href="/product/2004-Cabernet-Sauvignon-Reserve"><img alt="2004 Cabernet Sauvignon Reserve" src="/assets/images/products/thumbnails/red2.jpg"></a>
    </div>
  
     <div class="v65-promoGroupProductSKU">
           <a href="/product/2004-Cabernet-Sauvignon-Reserve">2004 Cabernet Sauvignon Reserve</a>
     </div>
  
     <div class="v65-promoGroupProductVintage">2004</div>
  
     <div class="v65-promoGroupPrice">
          <span class="promo">$7,999.00</span> / Bottle
     </div>
  
     <div class="v65-promoGroupProductTeaser">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu elementum enim. Vivamus et sapien ligula. Fusce neque elit, aliquam sit amet cursus non, dictum ac metus. Sed vitae faucibus tortor.</p>
     </div>
  
      <div class="v65-promoGroupProductActionMessage"></div>
  
      <div class="v65-promoGroupProductCustomerRatings"> </div>
  
      <div class="v65-promoGroup-RPRating"><div class="v65-promoGroup-RPRatingLabel">RP</div>94
      </div>
   
      <div class="v65-promoGroup-WERating">
            <div class="v65-promoGroup-WERatingLabel">WE</div>98
      </div>
   
      <div class="v65-promoGroupAddToCart">
            <form method="post" class="v65-addToCart" v65js="addToCart">
                 <input type="hidden" name="productSKU" value="2004 Cabernet Sauvignon Reserve">
                 <input type="hidden" name="productCategoryID" value="cb18f14f-b575-6d7c-b7c0-f42f57765ff3">
                 <button class="defaultBtn" type="submit"><span>Add To Cart</span></button>
            </form>
      </div>
  
</div>

Base CSS from vin65.css:

.v65-promoGroupProduct
.v65-promoGroupProductTitle
.v65-promoGroupProductThumbnail
.v65-promoGroupProductPhoto
.v65-promoGroupProductSKU
.v65-promoGroupProductVintage
.v65-promoGroupPrice
.v65-promoGroupProductTeaser
.v65-promoGroupProductActionMessage
.v65-promoGroupProductCustomerRatings
.v65-promoGroup-RPRating
.v65-promoGroup-WSRating
.v65-promoGroup-WERating
.v65-promoGroup-CGRating
.v65-promoGroup-JHRating
.v65-promoGroup-STRating
.v65-promoGroup-WNRating
.v65-promoGroup-WAndSRating
.v65-promoGroup-WARating
.v65-promoGroup-WBRating
.v65-promoGroupAddToCart

v65:subscribe

<v65:subscribe contactType="Newsletter"></v65:subscribe>

Description: Creates a simple form with an email field and a subscribe button. Subscribers are place by default into a Contact Type called "Newsletter" which must exist. You can alternatively create a different Contact Type and pass that in the tag.

Output:

<div id="v65-subscribeWidget">
      <form method="post">
            <input type="hidden" name="contactType" value="#attributes.contactType#" />
            <input type="text" name="email" value="#rb('email')#">
            <button type="submit" class="defaultBtn"><span>#rb('subscribe')#</span></button>
      </form>
</div>

Customization:

1. To customize the button text and thank you text you need to edit the resource bundle:
The elements you want to adjust are "subscribe" and "subscribeThankYouText"

3. Styling the form elements:
You can both the form field and the button by targeting the following IDs:
#v65-subscribeWidget input { }
#v65-subscribeWidget button { }

v65:siteLogin

<v65:siteLogin signUpPageID="yourpageID"></v65:siteLogin>

Description: Use this tag to force someone to login before entering your site.

Required Attributes:

signUpPageID: specify which page content to pull into modal to customize messaging. This must be specified in order for the tag to work. Add the keyword of "siteLogin" to this page in the Content Editor under Page Properties > Admin > Keyword.

default: none
usage: <v65:siteLogin signUpPageID="yourpageID"></v65:siteLogin>

IPAddressOverride: specify a list of IP Addresses that will override the login security by bypassing the login modal. Note: Multiple IDs must be separated by a comma with no spaces.

usage: <v65:siteLogin signUpPageID="yourpageID" IPAddressOverride="IP Address,IP Address 2"></v65:siteLogin>

v65:twitterFeed

<v65:twitterFeed maxRows="2" searchQuery="@vin65team OR from:vin65team"></v65:twitterFeed>

Description: Use this tag to pull a twitter feed onto your site.

Mandatory Attributes:

searchQuery: define the search parameters for the feed

usage: <v65:twitterFeed searchQuery="@vin65team OR from:vin65team"></v65:twitterFeed>

For a list of all search operators that you can put into the twitter searchQuery visit twitter's API page:
https://dev.twitter.com/docs/using-search

To test your search on twitter go to: https://twitter.com/#!/search-home

Optional Attributes:

maxRows: how many items to display

default: 2
usage: <v65:twitterFeed maxRows="2" searchQuery="@vin65team"></v65:twitterFeed>

HTML Source Output:

<div class="v65-tweet">

   <div class="v65-tweetProfileImage">
      <a href="https://twitter.com/intent/user?screen_name=bmjohnson" target="_blank">
         <img src="https://a3.twimg.com/profile_images/1128529707/brent-twitter-canucks_normal.jpg" alt="bmjohnson profile">
      </a>
   </div>

   <div class="v65-tweetText">
      Twitter Text
   </div>

   <div class="v65-tweetDetails">
      <em>
      <a href="https://twitter.com/bmjohnson/status/133954799950495744" time="Tue, 08 Nov 2011 17:11:27 +0000" class="twtr-timestamp" target="_blank"> 3 days ago</a> ·
      <a href="https://twitter.com/intent/tweet?in_reply_to=133954799950495744" class="twtr-reply" target="_blank">reply</a> ·
      <a href="https://twitter.com/intent/retweet?tweet_id=133954799950495744" class="twtr-rt" target="_blank">retweet</a> ·
      <a href="https://twitter.com/intent/favorite?tweet_id=133954799950495744" class="twtr-fav" target="_blank">favorite</a>
      </em>
   </div>

</div>

Base CSS from vin65.css:
.v65-tweet { }
.v65-tweetProfileImage { }
.v65-tweetText { }
.v65-tweetDetails { }

v65:birthDateValidation

<v65:birthDateValidation></v65:birthDateValidation>

Description: Asks the visitor to confirm that they are old enough to enter the site by specifying their birthdate.
Content is pulled for the age gate tag from a page in the admin panel with a keyword of "BirthDateValidation"

HTML Source Output:

<div id="v65-modalContainer">

     <div id="v65-modalViel">&nbsp;</div>
 
     <div id="v65-modalAgeVerification">
  
           <div id="v65-modalContent">
   
                //Page Content//

                <div class="v65-form">

                     <form method="post" action="/index.cfm?method=homepage.validateAge" id="v65-checkBilling">
                     <fieldset>
       
                     <div>
                         <label for="BirthDate"><span class="red">*</span>Birth Date</label>
                         <select name="BirthMonth" id="v65-billBirthMonth">
                              <option value="">Month</option>
                              <option value="1">Jan</option>
                              <option value="2">Feb</option>
                         </select>
       
                         <select name="BirthDay" id="v65-billBirthDay">
                              <option value="">Day</option>
                              <option value="1">1</option>
                              <option value="2">2</option>  
                         </select>
     
                         <select name="BirthYear" id="v65-billBirthYear">
                              <option value="">Year</option>
                              <option value="1900">1900</option>
                              <option value="1901">1901</option>
                         </select>         
                    </div>

                    <div>
                         <button type="submit" value="submit" class="defaultBtn"><span>Submit</span></button>
                    </div>

                    </fieldset>

                    </form>
    
               </div>

          </div>
  
     </div>

</div>

Base CSS from vin65.css:
#v65-modalContainer
#v65-modalViel
#v65-modalAgeVerification
#v65-modalContent
.v65-ageGate-yes
.v65-ageGate-no

Resource Bundle Elements:
Month
Day
Year

v65:eventToday

<v65:eventToday></v65:eventToday>

Description: Outputs events for today and allows you to move back and forth using a block style calendar.

Options:

hasCalendar: adds a block style calendar to move months

default="0"
usage: <v65:eventToday hasCalendar="1"></v65:eventToday>

calendar: by default the widget shows events from all calendars but set the calendar to specify a single calendar.

default=""
usage: <v65:eventToday calendar="My Calendar"></v65:eventToday>

showWithNoEvents: shows even if there are no events

default="1"
usage: <v65:eventToday showWithNoEvents="0"></v65:eventToday>

HTML Output:

<div class="v65-event-today v65-group">
     <div class="v65-event-date">Friday July 13, 2012</div>
     <div class="v65-event-title">Today's Schedule</div>
     <div class="v65-event-events">
          <div class="v65-event-events-event">
              <div class="v65-event-events-event-time">2:05 PM</div>
              <div class="v65-event-events-event-title"><a href="EventLink">Wine Tasting</a></div> 
         </div>
     </div>
</div>

<div class="v65-event-calendar v65-group">

     <div class="v65-event-calendar-nav">
          <a href="link">«</a>
          <span class="v65-event-calendar-nav-title">Jul 2012</span>
          <a href="link">»</a>
     </div>

     <table cellpadding="0" cellspacing="0">
          <tbody>

          <tr>
               <th>S</th>
               <th>M</th>
               <th>T</th>
               <th>W</th>
               <th>T</th>
               <th>F</th>
               <th>S</th>
         </tr>
  
         <tr valign="top">
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
              <td>7</td>
         </tr>

         <tr valign="top">
              <td>8</td>
              <td>9</td>
              <td>10</td>
              <td>11</td>
              <td><a href="link">12</a></td>
              <td class="v65-event-calendar-today"><a href="link">13</a></td>
              <td>14</td>
         </tr>

         <tr valign="top">
              <td>15</td>
              <td>16</td>
              <td>17</td>
              <td>18</td>
              <td>19</td>
              <td>20</td>
              <td>21</td>
         </tr>

         <tr valign="top">
              <td>22</td>
              <td>23</td>
              <td>24</td>
              <td>25</td>
              <td>26</td>
              <td>27</td>
              <td>28</td>
         </tr>

         <tr valign="top">
               <td>29</td>
               <td>30</td>
               <td>31</td>
               <td class="v65-event-calendar-offMonth">1</td>
               <td class="v65-event-calendar-offMonth">2</td>
               <td class="v65-event-calendar-offMonth">3</td>
               <td class="v65-event-calendar-offMonth">4</td>
          </tr>

          </tbody>
     </table>
</div>

CSS Styles:

/* -----Event Today----- */
.v65-event-today { text-align: center; }
     .v65-event-date {  }
     .v65-event-title { font-weight: bold; margin-bottom: 1em; }
 
    .v65-event-events {  }
        .v65-event-events-event { margin-bottom: 1em; }
        .v65-event-events-event-time { display: inline-block; margin-right: 5px; }
        .v65-event-events-event-title { display: inline-block; }
  
/* -----Event Today With Calendar----- */
.v65-event-calendar { margin-bottom: 1em; }

    .v65-event-calendar-nav { font-weight: bold; text-align: center; }
    .v65-event-calendar-nav-title {  }
 
    .v65-event-calendar table { border-top: 1px solid #999; border-right: 1px solid #999; width: 100%; margin: 0 auto; font-size: 0.897em; }
    .v65-event-calendar th { border-bottom: 1px solid #999; border-left: 1px solid #999; padding: 1px; font-weight: bold; text-align: center; padding: 0; color: #fff; background-color: #666; }
    .v65-event-calendar td { border-bottom: 1px solid #999; border-left: 1px solid #999; padding: 1px; text-align: center; width: 14%; }
 
    .v65-event-calendar .v65-CalendarDay { float: right; width: 15px; height: 15px; padding: 0 2px 2px 2px; border-left: 1px solid #999; border-bottom: 1px solid #999; text-align:right; font-size: 0.917em; color:#869fc3; clear: both; }
    .v65-event-calendar .v65-CalendarToDay { background-color: #ccc; }
    .v65-event-calendar .v65-CalendarOffMonthDays { background-color: #eee; }
    .v65-event-calendar .v65-CalendarEvent { clear: both; padding: 0px 0px 8px 0px; font-size: 0.917em; }
    .v65-event-calendar .v65-CalendarEvent a { }

v65:eventUpcoming

<v65:eventUpcoming></v65:eventUpcoming>

Description: Outputs upcoming events in a widget on any page. 

Options:

eventCount: specifies the amount of events to show

default="5"
usage: <v65:eventUpcoming eventCount="10"></v65:eventUpcoming>

calendar: by default the widget shows events from all calendars but set the calendar to specify a single calendar.

default=""
usage: <v65:eventUpcoming calendar="My Calendar"></v65:eventUpcoming>

showWithNoEvents: shows even if there are no events

default="1"
usage: <v65:eventUpcoming showWithNoEvents="0"></v65:eventUpcoming>

HTML Output:

<div class="v65-event-upcoming">
     <div class="v65-event-upcoming-title">Upcoming Events</div>
     <div class="v65-event-upcoming">
          <div class="v65-event-upcoming-event">
               <div class="v65-event-upcoming-event-date">Jul 12, 2012 </div>
               <div class="v65-event-upcoming-event-time">1:00 PM - 2:00 PM</div>
               <div class="v65-event-upcoming-event-title"><a href="#EventLink#">Wine Tasting</a></div> 
          </div>
     </div>
</div>

CSS Styles:

.v65-event-upcoming { text-align: center; }
     .v65-event-upcoming-title { font-size: 1.2em; font-weight: bold; }
          .v65-event-upcoming-event { margin-bottom: 1em; }
          .v65-event-upcoming-event-date { font-weight: bold; }
          .v65-event-upcoming-event-time { display: inline-block; margin-right: 5px; }
          .v65-event-upcoming-event-title { display: inline-block; }

Resource Bundle Elements:
UpcomingEvents