0

hope you are well.

I have a problem with an Extension that should display our Events. Actually it looks like: enter image description here

We would like to change it a little bit, so it fits better to our Template. It should look like this: enter image description here

My designer has actually some problems regarding COVID-19 and cannot help me with it. It would be great if someone could tell me what i need to change to make that happen.

Here is the View Template

<!--@copyright Copyright (c) 2016 www.tigren.com-->
<?php
$event = $block->getEvent();
if ($event->getId()) {
    ?>
    <div class="event-content">
        <!--Content-->
        <div class="event-info">
            <div class="section-label">Event Information</div>
            <div class="event-info-field event-time">
                <div class="event-info-label"><label><?= __('Time') ?></label></div>
                <div class="event-info-content"><?= $block->getFormattedTime($event->getStartTime()); ?>
                    - <?= $block->getFormattedTime($event->getEndTime()); ?></div>
            </div>
            <div class="event-info-field event-location">
                <span class="event-info-label"><label><?= __('Location') ?></label></span>
                <span class="event-info-content"><?= $event->getLocation(); ?></span>
            </div>

            <?php if ($block->getScopeConfig('events/general_setting/show_num_participants')) {
        ?>
                <div class="event-info-field participants">
                    <div class="event-info-label"><label><?= __('Number of Participant') ?></label></div>
                    <div class="event-info-content">
                        <?php
                        if ($event->getNoOfParticipant() > 0) {
                            echo $event->getNoOfParticipant();
                        } else {
                            echo '0';
                        } ?>
                    </div>
                </div>
                <?php
    }
    if ($event->getRegistrationDeadline()) {
        ?>
                <div class="event-info-field deadline">
                    <div class="event-info-label"><label><?= __('Registration Deadline') ?></label></div>
                    <div class="event-info-content"><?= $block->getFormattedTime($event->getRegistrationDeadline()); ?></div>
                </div>
                <?php
    } ?>
            <div class="event-info-field event-price">
                <div class="event-info-label"><label><?= __('Price') ?></label></div>
                <div class="event-info-content">
                    <?php
                    if ($event->getPrice() > 0) {
                        echo $block->getPriceWithCurrency();
                    } else {
                        echo __('FREE');
                    } ?>
                </div>
            </div>
        </div>
        <!--Organizer-->
        <?php if ($event->getIsShowContact() && (($event->getContactPerson() != '')
                || ($event->getContactPhone() != '') || ($event->getContactEmail() != '') || ($event->getContactAddress() != ''))
        ) {
                        ?>
            <div class="event-organizer">
                <div class="section-label">Organizer Information</div>
                <?php if ($event->getContactPerson() != '') {
                            ?>
                    <div class="event-info-field event-contact-person">
                        <span class="event-info-label"><label><?= __('Contact Person') ?></label></span>
                        <span class="event-info-content"><?= $event->getContactPerson(); ?></span>
                    </div>
                    <?php
                        } ?>
                <?php if ($event->getContactPhone() != '') {
                            ?>
                    <div class="event-info-field event-contact-phone">
                        <span class="event-info-label"><label><?= __('Phone') ?></label></span>
                        <span class="event-info-content"><?= $event->getContactPhone(); ?></span>
                    </div>
                    <?php
                        } ?>
                <?php if ($event->getContactEmail() != '') {
                            ?>
                    <div class="event-info-field event-contact-email">
                        <span class="event-info-label"><label><?= __('Email') ?></label></span>
                        <span class="event-info-content"><?= $event->getContactEmail(); ?></span>
                    </div>
                    <?php
                        } ?>
                <?php if ($event->getContactAddress() != '') {
                            ?>
                    <div class="event-info-field event-contact-address">
                        <span class="event-info-label"><label><?= __('Address') ?></label></span>
                        <span class="event-info-content"><?= $event->getContactAddress(); ?></span>
                    </div>
                    <?php
                        } ?>
            </div>
            <?php
                    } ?>

        <div class="register-button">
            <?php if ($block->getScopeConfig('events/general_setting/allow_send_invitation')) {
                        ?>
                <button href="#inviteformcontent" id="invite_friend_button" class="action primary"
                        title="<?= __('Invite Friends'); ?>">
                    <?= __('Invite Friends'); ?>
                </button>
                <?php
                    } ?>

            <!--register event-->
            <?php
            if ($event->isAllowRegisterEvent()) {
                if ($event->getPrice() > 0) {
                    ?>
                    <button onclick="location.href='<?= $event->getAddToCartUrl(); ?>'" class="action primary"
                            title="<?= __('Buy Ticket'); ?>">
                        <?= __('Buy Ticket') ?>
                    </button>
                    <?php
                } else {
                    ?>
                    <button onclick="location.href='<?= $event->getRegisterUrl() ?>'" class="action primary"
                            title="<?= __('Register'); ?>">
                        <?= __('Register'); ?>
                    </button>
                    <?php
                }
            } ?>
        </div>

        <!-- share Link-->
        <?php if ($block->getScopeConfig('events/general_setting/show_social_share')) {
                ?>
            <div class="event-social-links tigren-social">
                <?= $block->getFacebookButton(); ?>
                <?= $block->getTwitterButton(); ?>
                <?= $block->getGooglePlusButton(); ?>
                <div class="social-button favorite-img">
                    <a href="<?= $block->getUrl(
                        'events/index/favorite',
                        ['event_id' => $event->getId(), 'action' => $block->isFavorited() ? 'remove' : 'add']
                    ) ?>">
                        <img src="<?= $block->getFavoriteImageSrc(); ?>" height="28" width="28"
                             alt="Favorite"
                             title="<?= $block->isFavorited() ? __('Remove from Favorite') : __('Add to Favorite'); ?>"/>
                    </a>
                </div>
            </div>
            <?php
            } ?>
        <!-- End Share -->
    </div>
            <!--Description-->
        <div class="event-description">
            <?= $block->getDescriptionHtml($event); ?>
        </div>

    <?php if ($block->getScopeConfig('events/general_setting/allow_send_invitation')) {
                ?>
        <div id="inviteformcontent" style="display:none;">
            <div id="invite_form_header" class="page-title" style="text-align: center">
                <h2><strong><?= __('Invite Friends'); ?></strong></h2>
            </div>
            <form action="<?= $block->getUrl('events/Index/Sendinvitation') ?>" id="event-invite-form"
                  method="post">
                <input type="hidden" name="event_id" id="event_id" value="<?= $event->getId(); ?>"/>
                <div class="yourname">
                    <label for="yourname" class="required"><?= __('Your Name:') ?>
                        <span class="required" style="color: red"> * </span></label>
                    <div class="input-box">
                        <input type="text" name="yourname" class="input-text required-entry" id="yourname"/>
                    </div>
                </div>
                <div class="friendemail">
                    <label for="friendemail"><?= __('Send to: ') ?>
                        <span class="required" style="color: red"> * </span> </label>
                    <div class="input-box">
                        <input type="text" name="friendemail" class="input-text required-entry validate-email"
                               id="friendemail"/>
                    </div>
                </div>
                <div class="invitemessage">
                    <label for="invitemessage"><?= __('Message: ') ?></label>
                    <div class="input-box">
                        <textarea name="invitemessage" rows="5" cols="44"></textarea>
                    </div>
                </div>
                <div class="buttons-set" style="text-align: center">
                    <input class="action primary" type="submit" id="invite-form-button" title="submit" value="Submit"/>
                </div>
            </form>
        </div>
        <?php
            }
}
?>

<script type="text/javascript">
    require(["jquery", "mage/mage", "fancybox"], function ($) {
        $(document).ready(function () {
            var inviteForm = $('#event-invite-form');
            inviteForm.mage('validation', {});

            $('#invite_friend_button').fancybox({
                helpers: {
                    title: null
                }
            });
        });
    });
</script>

and this are the CSS-Style of view template:

/* Common */
ul {
    list-style-type: none;
}

.buttons-set p.required {
    color: red;
}

/* Events Filter*/
#top-filter .event-search {
    width: 25%;
}

#top-filter .location-search {
    width: 25%;
}

#top-filter .category-filter {
    width: 25%;
}

#top-filter .search-button {
    width: 20%;
    margin-bottom: 3px;
}

#top-filter {
    clear: both;
}

.event-index .box-filter {
    margin-bottom: 30px;
}

.event-index .view-mode {
    margin-bottom: 30px;
}

.event-index .view-mode .viewmode-grid {
    width: 40%;
    margin-left: 30px;
}

/* Events Grid mode */
.page-events .event-item .desc {
    min-height: 120px;
}

.page-events .event-item .event-title a {
    color: black;
}

.page-events .event-item .event-item-details label {
    font-weight: 600;
}

/* Events Calendar mode */
/* Quickview */
.event-quickview {
    display: none;
    position: fixed;
    width: 530px;
    border: 1px solid black;
    z-index: 1000;
    background: #ffffff;
}

.event-quickview .event-image {
    float: left;
    width: 30%;
    padding: 5px;
}

.event-quickview .event-info {
    float: right;
    width: 65%;
    padding: 5px;
}

.event-quickview .event-info label {
    font-weight: 600;
}

.event-quickview .event-info .event-title a {
    font-weight: bold;
    font-size: 120%;
    color: black;
}

/* Event Details*/
.event-info-main {
    padding-left: 2%;
    box-sizing: border-box;
}

.event-info-main .page-title-wrapper {
    border-bottom: 1px #c1c1c1 solid;
    width: 100%;
    margin-bottom: 15px;
}

.event-info-main .page-title-wrapper h1 {
    font-weight: bold;
}

.event-info-main .event-content {
    width: 100%;
    color: #575757;
    margin-bottom: 15px;
}

.event-info-main .event-content .event-info, .event-info-main .event-content .event-organizer {
    font-size: 1.2em;
}

.event-info-main .event-content .event-description, .event-info-main .event-content .event-organizer,
.event-info-main .event-content .event-info, .event-info-main .event-content .register-button {
    margin-bottom: 20px;
}

.event-info-main .event-content .event-info-field {
    display: table;
    width: 100%;
    color: #575757;
    margin-bottom: 5px;
}

.event-info-main .event-content .event-info-field .event-info-label {
    display: table-cell;
    vertical-align: middle;
    width: 30%;
    font-weight: 600;
    background-color: #F3F3F3;
    padding: 5px 10px;
}

.event-info-main .event-content .event-info-field .event-info-content {
    display: table-cell;
    vertical-align: middle;
    width: 70%;
    background-color: #FCFCFC;
    padding: 5px 10px;
}

.event-info-main .event-content .event-organizer {
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 10px;
}

.event-info-main .event-content .section-label {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 5px;
    background-color: #F3F3F3;
}

.event-info-main .event-content .event-description {
    padding-left: 10px;
    padding-bottom: 10px;
    white-space: pre-line;
    border-bottom: 1px solid #c1c1c1;
}

.tigren-social {
    display: block;
    width: 100%;
}

.tigren-social .favorite-img {
    margin-top: -5px;
}

.tigren-social .social-button {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.event.media .event-image {
    position: relative
}

.event.media .free-tag {
    position: absolute;
    top: 0;
    right: 0;
}

.event.media .event-image > img {
    width: 100%;
}

/*Invite friend */
#inviteformcontent .field label {
    float: left;
    min-width: 90px;
    text-align: left;
    line-height: 30px;
}

#inviteformcontent .field .input-box {
    float: left;
}

#inviteformcontent .field.last .input-box {
    clear: both;
    width: 285px;
}

#inviteformcontent .field .input-box {
    width: 200px;
}

#inviteformcontent .field .input-box input.input-text {
    width: 200px;
}

#inviteformcontent .field .input-box textarea {
    width: 285px;
}

#inviteformcontent .field {
    margin: 0 0 10px;
}

#inviteformcontent .field span.required {
    color: red;
}

#inviteformcontent .field label.required:after, span.required:after {
    content: none !important;
}

/* Register */
#event-registration .input-box {
    width: 50%;
}

.registration-note {
    font-size: 1.5em;
    margin-bottom: 10px;
}

/* Wishlist */
.event-wishlist-table th {
    text-align: center;
}

#event-wishlist h3 {
    color: red;
    text-align: center;
    margin-top: 40px;
}

/* Pager */
.events-list ~ .toolbar .toolbar-amount {
    display: none;
}

.events-list ~ .toolbar .limiter {
    display: block;
}

/* Override product classes ------------------------------*/
/*Index*/
.events {
    margin: 30px 0;
}

.event-item {
    vertical-align: top;
}

.events-grid .event-item {
    width: 50%;
    display: inline-block;
}

.event-item-name {
    display: block;
    margin: 5px 0;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.event-item-info {
    width: 152px;
    max-width: 100%;
}

.page-events .event-item-info {
    width: 240px;
}

.event-item-actions {
    display: none;
}

.event-item-actions .actions-secondary > .action:before {
    margin: 0;
}

.column.main .event-items {
    margin-left: -20px;
}

.column.main .event-item {
    padding-left: 20px;
}

@media all and (min-width: 1024px), print {
    .page-events .events-grid .event-items {
        margin: 0;
    }

    .page-events .events-grid .event-item {
        width: 24.439%;
        margin-left: calc((100% - 4 * 24.439%) / 3 - 1);
        padding: 0;
    }

    .page-events .events-grid .event-item:nth-child(4n+1) {
        margin-left: 0;
    }
}

.events-grid .event-item-info:hover,
.events-grid .event-item-info.active {
    margin: -10px;
    padding: 9px;
    border: 1px solid #bbbbbb;
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    background: #ffffff;
}

.event-image-container {
    display: inline-block;
    max-width: 100%;
}

.event-image-wrapper {
    height: 0;
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.event-image-photo {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: auto;
    max-width: 100%;
}

/*Details*/
.event-addto-links {
    display: inline;
}

.event-social-links {
    margin: 0 0 20px;
    text-align: center;
}

@media all and (min-width: 768px), print {
    .event-info-main .page-title-wrapper h1 {
        margin-bottom: 15px;
    }

    .event-social-links {
        text-align: left;
    }

    .event-info-main {
        float: right;
    }

    .event.media {
        float: left;
        margin-bottom: 25px;
    }

    .page-layout-1column .event-info-main {
        width: 40%;
    }

    .page-layout-1column .event.media {
        width: 57%;
    }

    .page-layout-2columns-left .event-info-main,
    .page-layout-2columns-right .event-info-main,
    .page-layout-3columns .event-info-main {
        width: 48%;
    }

    .page-layout-2columns-left .event.media,
    .page-layout-2columns-right .event.media,
    .page-layout-3columns .event.media {
        width: 50%;
    }
}

Could someone look at this and help me out? That would be awesome!

I am really happy to receive any helpful feedback.

Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.